@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap');

/* ==========================================================================
   BarangayHub — public site stylesheet
   ==========================================================================

   Written for BarangayHub. It owes nothing to the template this project was
   bought as, and replaces it outright: load this file and the licensed
   stylesheet is not needed, which is the whole point of it existing.

   It sits on top of Bootstrap 4 (MIT), Font Awesome, Themify and Owl Carousel,
   which the page already loads and which carry their own permissive licences.
   So this is the theme layer only — the grid, the icons and the carousel
   mechanics are not reimplemented here.

   It is also self-contained: nothing needs to load after it. The override sheet
   the licensed theme depends on is skipped when this one is in use.

   Structure, in order:
     1. Tokens          every colour, size and radius, in one place
     2. Base            reset, page frame, typography
     3. Controls        buttons, links, form fields
     4. Header          top bar, masthead, navigation, mobile drawer
     5. Hero            homepage carousel
     6. Strip           the three-up panel under the hero
     7. Sections        headings, About, quotes
     8. Cards           departments, officials, news, partners, services
     9. Inner pages     page header, breadcrumbs
    10. Contact         form and detail cards
    11. Footer
    12. Responsive, motion and print

   Rebranding for another barangay means editing section 1 and nothing else.
   ========================================================================== */


/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
    /* Brand. Navy carries the official weight; gold is the accent that keeps it
       from reading as cold, and is used sparingly so it stays an accent. */
    --bh-navy-900: #001a3d;
    --bh-navy-800: #002451;
    --bh-navy-700: #003067;
    --bh-navy-600: #0a4a8f;
    --bh-navy-500: #1565b8;
    --bh-navy-100: #e8f0f9;
    --bh-navy-050: #f3f7fc;

    --bh-gold-600: #c98a08;
    --bh-gold-500: #f4b41a;
    --bh-gold-100: #fdf3e0;

    /* Neutrals. A single ramp, so greys never disagree with one another. */
    --bh-ink:       #16202c;
    --bh-ink-soft:  #47535f;
    --bh-ink-mute:  #6b7683;
    --bh-line:      #e3e8ee;
    --bh-line-soft: #eef2f6;
    --bh-surface:   #ffffff;
    --bh-canvas:    #f7f9fb;

    /* Status. Used on fees, badges and form feedback. */
    --bh-good-bg: #e8f5ec; --bh-good-fg: #1e6b39;
    --bh-warn-bg: #fdf3e0; --bh-warn-fg: #8a6116;
    --bh-bad-bg:  #fdeaea; --bh-bad-fg:  #a32020;

    /* Roles, so components never name a raw colour. */
    --bh-primary:      var(--bh-navy-700);
    --bh-primary-dark: var(--bh-navy-800);
    --bh-accent:       var(--bh-gold-500);
    --bh-body:         var(--bh-ink-soft);
    --bh-heading:      var(--bh-ink);

    /* Text sitting on the dark brand colour — the top bar, the hero, the page
       header, breadcrumbs and the footer. These were eighteen separate hex
       values scattered through the file, which meant a barangay changing the
       navy got a green site with blue-grey footer text. Four steps is enough:
       soft for body copy, mute for secondary lines, dim for de-emphasised
       links, faint for separators. A theme overrides these along with the
       ramp, so every surface moves together. */
    --bh-on-primary:       #ffffff;
    --bh-on-primary-soft:  #eaf1fa;
    --bh-on-primary-mute:  #c9d8ea;
    --bh-on-primary-dim:   #a8bdd6;
    --bh-on-primary-faint: #93a8c4;

    /* Type. Serif for display sizes only; the interface itself stays sans,
       which is easier to read at the sizes most of this page is set in. */
    --bh-font:         'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bh-font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;

    /* Fluid scale: each step grows with the viewport, so nothing has to be
       re-tuned per breakpoint. */
    --bh-t-xs:  0.75rem;
    --bh-t-sm:  0.8125rem;
    --bh-t-md:  0.9375rem;
    --bh-t-lg:  1.0625rem;
    --bh-t-xl:  clamp(1.15rem, 0.6vw + 1rem, 1.35rem);
    --bh-t-2xl: clamp(1.4rem,  1.1vw + 1rem, 1.85rem);
    --bh-t-3xl: clamp(1.75rem, 1.9vw + 1rem, 2.5rem);
    --bh-t-4xl: clamp(2.1rem,  3.2vw + 1rem, 3.4rem);

    /* Spacing, on a 4px base. */
    --bh-1: 4px;  --bh-2: 8px;  --bh-3: 12px; --bh-4: 16px;
    --bh-5: 24px; --bh-6: 32px; --bh-7: 48px; --bh-8: 64px; --bh-9: 88px;

    --bh-r-sm: 6px; --bh-r-md: 10px; --bh-r-lg: 16px; --bh-r-pill: 999px;

    /* Shadows stay quiet: borders do most of the separating, which keeps the
       page feeling like a document rather than a stack of floating panels. */
    --bh-shadow-sm: 0 1px 2px rgba(16, 32, 48, .06);
    --bh-shadow-md: 0 2px 8px rgba(16, 32, 48, .08);
    --bh-shadow-lg: 0 12px 32px rgba(16, 32, 48, .12);

    --bh-ease: cubic-bezier(.2, .7, .3, 1);
}


/* ==========================================================================
   2. Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bh-surface);
    color: var(--bh-body);
    font-family: var(--bh-font);
    font-size: var(--bh-t-md);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--bh-3);
    color: var(--bh-heading);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

h1 { font-family: var(--bh-font-display); font-size: var(--bh-t-4xl); font-weight: 700; }
h2 { font-family: var(--bh-font-display); font-size: var(--bh-t-3xl); font-weight: 700; }
h3 { font-size: var(--bh-t-2xl); }
h4 { font-size: var(--bh-t-xl); }
h5 { font-size: var(--bh-t-lg); }
h6 { font-size: var(--bh-t-md); }

p { margin: 0 0 var(--bh-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--bh-navy-600); text-decoration: none; transition: color .15s var(--bh-ease); }
a:hover { color: var(--bh-primary); text-decoration: underline; }

/* One visible focus style everywhere. Keyboard users are the ones who cannot
   recover from losing their place, so this is never removed. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--bh-primary);
    outline-offset: 2px;
    border-radius: var(--bh-r-sm);
}

blockquote { margin: 0; }
ul, ol { margin: 0 0 var(--bh-4); padding-left: 1.15em; }
.list-unstyled { padding-left: 0; list-style: none; }


/* ==========================================================================
   3. Controls
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bh-2);
    padding: 11px 22px;
    border: 1px solid transparent;
    border-radius: var(--bh-r-sm);
    font-family: var(--bh-font);
    font-size: var(--bh-t-md);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background-color .15s var(--bh-ease),
                border-color .15s var(--bh-ease),
                color .15s var(--bh-ease),
                transform .1s var(--bh-ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn i { font-size: .9em; }

.btn-primary {
    background: var(--bh-primary);
    border-color: var(--bh-primary);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--bh-primary-dark);
    border-color: var(--bh-primary-dark);
    color: #fff;
}

.btn-outline-primary {
    background: transparent;
    border-color: var(--bh-primary);
    color: var(--bh-primary);
}
.btn-outline-primary:hover { background: var(--bh-primary); color: #fff; }

.btn-link {
    padding: 0;
    background: none;
    border: 0;
    color: var(--bh-navy-600);
    font-weight: 600;
}
.btn-link:hover { color: var(--bh-primary); text-decoration: underline; }

/* An underline that grows from the left — the one flourish the site allows
   itself, used on "read more" style links. */
.link-underlined,
.linkUnderlined,
.read-link,
.read-more {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--bh-2);
    color: var(--bh-navy-600);
    font-weight: 600;
}
.link-underlined::after,
.linkUnderlined::after,
.read-link::after,
.read-more::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    width: 100%; height: 2px;
    background: var(--bh-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s var(--bh-ease);
}
.link-underlined:hover::after,
.linkUnderlined:hover::after,
.read-link:hover::after,
.read-more:hover::after { transform: scaleX(1); }
.link-underlined:hover,
.linkUnderlined:hover,
.read-link:hover,
.read-more:hover { text-decoration: none; }

.form-control {
    width: 100%;
    padding: 10px 14px;
    background: var(--bh-surface);
    border: 1px solid var(--bh-line);
    border-radius: var(--bh-r-sm);
    color: var(--bh-ink);
    font-family: var(--bh-font);
    font-size: var(--bh-t-md);
    line-height: 1.5;
    transition: border-color .15s var(--bh-ease), box-shadow .15s var(--bh-ease);
}
.form-control::placeholder { color: var(--bh-ink-mute); }
.form-control:focus {
    outline: none;
    border-color: var(--bh-navy-500);
    box-shadow: 0 0 0 3px var(--bh-navy-100);
}
textarea.form-control { min-height: 140px; resize: vertical; }
label { display: inline-block; margin-bottom: var(--bh-1); color: var(--bh-ink); font-weight: 500; }


/* ==========================================================================
   4. Header
   ==========================================================================

   Three stacked bars: a thin contact strip, the masthead carrying the seal and
   the three facts residents ask for most, and the navigation, which becomes
   fixed once the masthead has scrolled away.

   The classes below are driven by assets_web/js/script.js and its contract is
   load-bearing:
     .header-sticky   gains .sticky past 245px of scroll
     #sidebar         gains .active when the burger is pressed
     .overlay         is jQuery fadeIn/fadeOut, so it MUST start display:none
   ========================================================================== */

.mainHeader {
    position: relative;
    z-index: 100;
    background: var(--bh-surface);
}

/* --- Top bar: email, phone, language, social ---------------------------- */

.topBar {
    padding: var(--bh-2) 0;
    background: var(--bh-navy-050);
    border-bottom: 1px solid var(--bh-line-soft);
    font-size: var(--bh-t-sm);
}
.topBar .info-outer { gap: var(--bh-5); }

.topBar .info-box {
    display: flex;
    align-items: center;
    gap: var(--bh-2);
    color: var(--bh-ink-soft);
}
.topBar .info-box .icon { color: var(--bh-navy-500); font-size: 1rem; line-height: 1; }
.topBar a { color: var(--bh-ink-soft); }
.topBar a:hover { color: var(--bh-primary); }

.topBar .social { display: flex; align-items: center; gap: var(--bh-3); }
/* The language picker and social icons are marked up as a list, so the bullets
   have to go or they sit in the middle of the top bar. */
.topBar .social ul {
    display: flex;
    align-items: center;
    gap: var(--bh-3);
    margin: 0;
    padding: 0;
    list-style: none;
}
.topBar .social li { display: inline-flex; align-items: center; }
.topBar .social a,
.topBar .social i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: var(--bh-r-pill);
    color: var(--bh-navy-600);
    font-size: .8rem;
    transition: background-color .15s var(--bh-ease), color .15s var(--bh-ease);
}
.topBar .social a:hover { background: var(--bh-primary); color: #fff; }

.topBar select {
    padding: 2px 6px;
    border: 1px solid var(--bh-line);
    border-radius: var(--bh-r-sm);
    background: var(--bh-surface);
    color: var(--bh-ink-soft);
    font-family: var(--bh-font);
    font-size: var(--bh-t-xs);
}

/* --- Masthead ----------------------------------------------------------- */

.middBar { padding: var(--bh-5) 0; }

.logo-wrap { gap: var(--bh-3); }
.middBar .main-logo img { max-height: 74px; width: auto; }

/* The three facts beside the seal: hours, phone, address. */
.helpInfo {
    display: flex;
    align-items: center;
    gap: var(--bh-3);
    padding-left: var(--bh-6);
}
.helpInfo .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px; height: 40px;
    border-radius: var(--bh-r-md);
    background: var(--bh-navy-100);
    color: var(--bh-primary);
    font-size: 1.1rem;
}
.helpInfo .media-body { min-width: 0; }
/* .helpInfo-title was an h6 — a label in the header contact strip, not a
   section heading. It is a span now and keeps the same appearance, so it needs
   to be told to fill its line. */
.helpInfo h6,
.helpInfo .helpInfo-title {
    display: block;
    margin: 0;
    color: var(--bh-heading);
    font-size: var(--bh-t-md);
    font-weight: 600;
    line-height: 1.35;
}
.helpInfo .subText {
    margin: 0;
    color: var(--bh-ink-mute);
    font-size: var(--bh-t-sm);
    line-height: 1.35;
}
.helpInfo .subText .closed,
.helpInfo .subText .text-danger { color: var(--bh-bad-fg); }

/* Burger. The horizontal bar carries d-none d-xl-block, so it appears at
   1200px and the burger has to disappear at exactly the same width — otherwise
   the desktop masthead shows both. */
@media (min-width: 1200px) {
    .sidebar-toggle-btn { display: none; }
}
.sidebar-toggle-btn .btn {
    padding: var(--bh-2) var(--bh-3);
    background: var(--bh-navy-100);
    border-color: transparent;
    color: var(--bh-primary);
    font-size: 1.15rem;
}
.sidebar-toggle-btn .btn:hover { background: var(--bh-primary); color: #fff; }

/* --- Navigation --------------------------------------------------------- */

.navbar {
    padding: 0;
    background: var(--bh-surface);
    border-top: 1px solid var(--bh-line-soft);
    border-bottom: 1px solid var(--bh-line);
}
.navbar > .container { display: flex; align-items: stretch; }

/* 12px, not 4. At 4 the links read as one run-on block and left a dead gap
   before the buttons on a wide screen; long labels like "Barangay
   Departments" need the separation to be legible as separate links. */
.navbar-nav { align-items: stretch; gap: var(--bh-3); }

.navbar-nav .nav-item { display: flex; align-items: stretch; }

.navbar-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--bh-2);
    padding: var(--bh-4) var(--bh-4);
    color: var(--bh-ink-soft);
    font-size: var(--bh-t-md);
    font-weight: 500;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color .15s var(--bh-ease), border-color .15s var(--bh-ease);
}
.navbar-nav .nav-link:hover {
    color: var(--bh-primary);
    border-bottom-color: var(--bh-navy-100);
    text-decoration: none;
}
.navbar-nav .nav-item.active > .nav-link,
.navbar-nav .nav-link.active {
    color: var(--bh-primary);
    font-weight: 600;
    border-bottom-color: var(--bh-accent);
}

/* The two call-to-action items on the right are buttons, not tabs, so they opt
   out of the underline treatment entirely.

   They live in a second .navbar-nav, so the spacing has to be set on that list
   rather than on the items. Setting it per item gave the first button 8px and
   the second 12px — the pair read as unevenly spaced, and both sat closer to
   "Resident Portal" than the links sat to each other, so the last link looked
   crowded by them.

   Padding, not margin: the list carries Bootstrap's ml-auto to push it right,
   and a margin-left of our own would override that and break the alignment. */
.navbar-nav.ml-auto { gap: var(--bh-2); padding-left: var(--bh-6); }
.navbar-nav .nav-btn { align-items: center; }
.navbar-nav .nav-btn > .nav-link {
    padding: 9px 18px;
    border: 1px solid var(--bh-primary);
    border-radius: var(--bh-r-sm);
    font-weight: 600;
}
.navbar-nav .nav-btn-ghost > .nav-link {
    color: var(--bh-primary);
    background: var(--bh-surface);
}
.navbar-nav .nav-btn-ghost > .nav-link:hover {
    background: var(--bh-navy-100);
    border-color: var(--bh-primary);
}
.navbar-nav .nav-btn-solid > .nav-link {
    background: var(--bh-primary);
    color: #fff;
}
.navbar-nav .nav-btn-solid > .nav-link:hover {
    background: var(--bh-primary-dark);
    border-color: var(--bh-primary-dark);
    color: #fff;
}

/* Sticky. The class is added by script.js past 245px; the header keeps its
   height because the bar is taken out of flow, so a placeholder is not needed
   at this breakpoint — the masthead above it is taller than the gap. */
.header-sticky.sticky {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 120;
    box-shadow: var(--bh-shadow-md);
    animation: bhDrop .25s var(--bh-ease);
}
@keyframes bhDrop { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* --- Mobile drawer ------------------------------------------------------ */

.sidebar-nav {
    position: fixed;
    top: 0; left: 0;
    z-index: 200;
    width: 300px;
    max-width: 86vw;
    height: 100%;
    padding: var(--bh-5) 0;
    background: var(--bh-navy-800);
    color: var(--bh-on-primary-soft);
    transform: translateX(-100%);
    transition: transform .28s var(--bh-ease);
    overflow-y: auto;
}
.sidebar-nav.active { transform: translateX(0); }

.sidebar-nav .metismenu { margin: 0; padding: 0; }
.sidebar-nav .metismenu a {
    display: block;
    padding: var(--bh-3) var(--bh-5);
    color: var(--bh-on-primary-soft);
    font-size: var(--bh-t-md);
    font-weight: 500;
    border-left: 3px solid transparent;
}
.sidebar-nav .metismenu a:hover,
.sidebar-nav .metismenu li.active > a {
    background: rgba(255, 255, 255, .07);
    border-left-color: var(--bh-accent);
    color: #fff;
    text-decoration: none;
}

/* The two actions pinned into the drawer for small screens. */
.sidebar-nav .bims-offcanvas-cta { margin: var(--bh-3) var(--bh-5); }
.sidebar-nav .bims-offcanvas-cta a {
    padding: 10px var(--bh-4);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: var(--bh-r-sm);
    text-align: center;
    border-left-width: 1px;
}
.sidebar-nav .bims-offcanvas-cta a:hover {
    background: var(--bh-accent);
    border-color: var(--bh-accent);
    color: var(--bh-navy-900);
}

#dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    margin: 0 var(--bh-5) var(--bh-4) auto;
    border-radius: var(--bh-r-sm);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    cursor: pointer;
}
#dismiss:hover { background: var(--bh-accent); color: var(--bh-navy-900); }

/* jQuery fadeIn/fadeOut drives this, so it starts hidden and is never given a
   permanent opacity. Getting this wrong greys out the entire site. */
.overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 190;
    background: rgba(0, 20, 45, .55);
}

/* Back-to-top button, appended to <body> by script.js. */
#toTop.btn-top {
    display: none;
    position: fixed;
    right: var(--bh-5); bottom: var(--bh-5);
    z-index: 150;
    width: 42px; height: 42px;
    padding: 0;
    border-radius: var(--bh-r-pill);
    background: var(--bh-primary);
    color: #fff;
    box-shadow: var(--bh-shadow-md);
}
#toTop.btn-top:hover { background: var(--bh-primary-dark); color: #fff; }


/* ==========================================================================
   5. Hero
   ==========================================================================

   Owl Carousel owns the mechanics. Two rules matter and both have bitten this
   project before:

   .header-slider-preloader is removed by script.js once Owl is ready. It must
   not be display:none, because Owl measures the slide while it is still
   applied and a hidden element measures zero — which collapses the hero.
   Fading it is safe; hiding it is not.

   The slide text is animated by Owl setting inline opacity on translate. The
   CSS default therefore has to be opacity:1, or the first slide — which never
   receives a translate event — renders invisible.
   ========================================================================== */

.header-slider { position: relative; background: var(--bh-navy-800); }
.header-slider.header-slider-preloader { opacity: 0; }
.header-slider { transition: opacity .3s var(--bh-ease); }

.slider_preloader {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bh-navy-800);
}
.slider_preloader_status {
    width: 34px; height: 34px;
    border: 3px solid rgba(255, 255, 255, .25);
    border-top-color: var(--bh-accent);
    border-radius: var(--bh-r-pill);
    animation: bhSpin .8s linear infinite;
}
@keyframes bhSpin { to { transform: rotate(360deg); } }

.slide-table { display: table; width: 100%; height: clamp(480px, 74vh, 760px); }
.slide-tablecell { display: table-cell; vertical-align: middle; }

.item.bims-slide {
    position: relative;
    background-color: var(--bh-navy-800);
    background-size: cover;
    background-position: center;
}
/* A wash so white text stays legible over any photograph a barangay uploads,
   weighted to the left where the text sits. */
.item.bims-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
                rgba(0, 26, 61, .90) 0%,
                rgba(0, 26, 61, .68) 45%,
                rgba(0, 26, 61, .22) 100%);
}
.slide-table { position: relative; z-index: 2; }

.slide-text { color: var(--bh-on-primary-soft); }
/* Never 0 — see the note at the top of this section. */
.slide-text > * { opacity: 1; }

.slide-text .bims-kicker {
    display: inline-block;
    margin-bottom: var(--bh-3);
    padding: 5px 12px;
    border-radius: var(--bh-r-pill);
    background: rgba(244, 180, 26, .18);
    color: var(--bh-accent);
    font-size: var(--bh-t-xs);
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.slide-text h1,
.slide-text h2 {
    margin-bottom: var(--bh-4);
    color: #fff;
    font-size: var(--bh-t-4xl);
    line-height: 1.12;
}
.slide-text p {
    max-width: 56ch;
    margin-bottom: var(--bh-5);
    color: var(--bh-on-primary-mute);
    font-size: var(--bh-t-lg);
}

.slide-buttons { display: flex; flex-wrap: wrap; gap: var(--bh-3); }
.slide-btn { padding: 13px 26px; }
.slide-btn.btn-primary {
    background: var(--bh-accent);
    border-color: var(--bh-accent);
    color: var(--bh-navy-900);
}
.slide-btn.btn-primary:hover {
    background: var(--bh-gold-600);
    border-color: var(--bh-gold-600);
    color: #fff;
}

/* Owl controls, restyled to match. */
.header-slider .owl-nav button.owl-prev,
.header-slider .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px; height: 42px;
    border-radius: var(--bh-r-pill);
    background: rgba(255, 255, 255, .14) !important;
    color: #fff !important;
    font-size: 1rem;
    transition: background-color .15s var(--bh-ease);
}
.header-slider .owl-nav button.owl-prev:hover,
.header-slider .owl-nav button.owl-next:hover { background: var(--bh-accent) !important; color: var(--bh-navy-900) !important; }
.header-slider .owl-nav button.owl-prev { left: var(--bh-5); }
.header-slider .owl-nav button.owl-next { right: var(--bh-5); }

.header-slider .owl-dots {
    position: absolute;
    left: 0; right: 0; bottom: var(--bh-5);
    display: flex;
    justify-content: center;
    gap: var(--bh-2);
}
.header-slider .owl-dots .owl-dot span {
    width: 9px; height: 9px;
    margin: 0;
    border-radius: var(--bh-r-pill);
    background: rgba(255, 255, 255, .4);
    transition: width .2s var(--bh-ease), background-color .2s var(--bh-ease);
}
.header-slider .owl-dots .owl-dot.active span { width: 26px; background: var(--bh-accent); }


/* ==========================================================================
   6. Strip
   ==========================================================================
   The three-up panel under the hero: when the hall is open, what can be done
   online, and who to ring. It overlaps the hero slightly so the page reads as
   one piece rather than two stacked blocks.
   ========================================================================== */

.grid-inner.bims-strip {
    position: relative;
    z-index: 10;
    margin-top: -56px;
    margin-bottom: var(--bh-5);
}
.bims-strip .row { align-items: stretch; }

.bims-strip .coloumn { display: flex; margin-bottom: var(--bh-4); }

.bims-strip .coloumn > .icon-widget,
.bims-strip .coloumn > .text-content { }

/* Each column is one card. The columns share a card shell rather than each
   having its own colour, which is what made the old strip read as "too blue".
   The icon sits above the text rather than beside it, which gives the card the
   height it needs to hold four service links without feeling packed. */
.bims-strip .coloumn.c-box-1,
.bims-strip .coloumn.c-box-2,
.bims-strip .coloumn.c-box-3 {
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    padding: var(--bh-6) var(--bh-5);
    background: var(--bh-surface);
    border: 1px solid var(--bh-line);
    border-radius: var(--bh-r-md);
    box-shadow: var(--bh-shadow-md);
}

.bims-strip .icon-widget {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    align-self: flex-start;
    width: 52px; height: 52px;
    margin-bottom: var(--bh-4);
    border-radius: var(--bh-r-md);
    background: var(--bh-navy-100);
    color: var(--bh-primary);
    font-size: 1.4rem;
}
.bims-strip .c-box-3 .icon-widget { background: var(--bh-gold-100); color: var(--bh-gold-600); }

.bims-strip .text-content { min-width: 0; }
.bims-strip .text-content h3 {
    margin-bottom: var(--bh-2);
    font-family: var(--bh-font);
    font-size: var(--bh-t-lg);
    font-weight: 600;
}
.bims-strip .text-content p { margin-bottom: var(--bh-1); font-size: var(--bh-t-md); }
.bims-strip-muted { color: var(--bh-ink-mute); font-size: var(--bh-t-sm); }

.bims-strip-list { margin: 0; }
.bims-strip-list li { display: flex; align-items: baseline; gap: var(--bh-2); margin-bottom: var(--bh-1); }
.bims-strip-list li i { color: var(--bh-accent); font-size: .75rem; }

.bims-strip-action { margin-top: var(--bh-3); }
.bims-strip-link { font-size: var(--bh-t-md); }


/* ==========================================================================
   7. Sections
   ========================================================================== */

.section-title { margin-bottom: var(--bh-6); text-align: center; }
.section-title h2,
.section-title .title {
    font-size: clamp(1.55rem, 1vw + 1.2rem, 2rem);
    line-height: 1.2;
}
.section-title h2,
.section-title .title { margin-bottom: var(--bh-3); }
.section-title p { color: var(--bh-ink-mute); font-size: var(--bh-t-lg); }

/* Some pages render a section-title whose heading has no text in it. Without
   this the gold rule below draws over blank space with nothing above it. */
.section-title h2:empty,
.section-title .title:empty { display: none; }

/* A small gold rule under centred section headings. */
.section-title h2::after,
.section-title .title::after {
    content: '';
    display: block;
    width: 52px; height: 3px;
    margin: var(--bh-4) auto 0;
    border-radius: var(--bh-r-pill);
    background: var(--bh-accent);
}

/* An eyebrow above the real heading, not a heading itself: as an h6 it
   ranked below the h3 it introduced. A span now, so it needs its own line. */
.heading-sm {
    display: block;
    margin-bottom: var(--bh-2);
    color: var(--bh-navy-500);
    font-family: var(--bh-font);
    font-size: var(--bh-t-xs);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.about-wrapper { padding: var(--bh-6) 0 var(--bh-7); }
.about-text { gap: var(--bh-6) 0; }
.about-content .text-block,
.about-wrapper .text-block { max-width: 60ch; }
.about-wrapper .feature-img img { border-radius: var(--bh-r-lg); box-shadow: var(--bh-shadow-md); }

.quote-text {
    margin: var(--bh-5) 0 var(--bh-3);
    padding-left: var(--bh-5);
    border-left: 3px solid var(--bh-accent);
    color: var(--bh-heading);
    font-family: var(--bh-font-display);
    font-size: var(--bh-t-xl);
    font-style: italic;
    line-height: 1.5;
}
.quote-attribution {
    display: block;
    color: var(--bh-ink-mute);
    font-size: var(--bh-t-sm);
    font-style: normal;
}
.signature { max-height: 62px; margin-top: var(--bh-3); }

.o-separator {
    position: relative;
    margin: var(--bh-7) 0;
    text-align: center;
    border-top: 1px solid var(--bh-line);
}
.o-separator-text {
    position: relative;
    top: -.75em;
    padding: 0 var(--bh-4);
    background: var(--bh-surface);
    color: var(--bh-ink-mute);
    font-size: var(--bh-t-sm);
}


/* ==========================================================================
   8. Cards
   ==========================================================================
   Departments, officials, news and partners. One card shell, four fillings —
   so a page that mixes them still looks like one page.
   ========================================================================== */

.bh-card,
.grid-content,
.department-item,
.team-member {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bh-surface);
    border: 1px solid var(--bh-line);
    border-radius: var(--bh-r-md);
    overflow: hidden;
    transition: border-color .18s var(--bh-ease),
                box-shadow .18s var(--bh-ease),
                transform .18s var(--bh-ease);
}
.grid-content:hover,
.department-item:hover,
.team-member:hover {
    border-color: var(--bh-navy-100);
    box-shadow: var(--bh-shadow-lg);
    transform: translateY(-2px);
}

/* --- Departments -------------------------------------------------------- */

.department-list,
.department { padding: var(--bh-8) 0; }

/* A block, not a flex row: the group title and its list of departments are
   siblings, and making the parent a flex container stands them side by side. */
.catLink {
    display: block;
    margin-bottom: var(--bh-4);
    color: var(--bh-heading);
}
/* The old sheet uppercased whole department group names, which turned long
   Filipino office titles into a wall. Left as written. */
.catLink-title {
    margin: 0;
    font-family: var(--bh-font);
    font-size: var(--bh-t-lg);
    font-weight: 600;
    text-transform: none;
}

.bims-dept-col { display: flex; margin-bottom: var(--bh-4); }

/* --- Department cards on /departments ----------------------------------- */
/* The markup is: an empty .img-container tile, a .mask holding the text, and a
   .mask-icon badge after it. There is no photograph — the tile was decoration
   in the template — so the tile is dropped and the badge is brought to the top
   where it does the work an image would have done. */

.department-list { padding: var(--bh-6) 0 var(--bh-8); }
.department-list > .container > .row > [class*="col-"] { display: flex; margin-bottom: var(--bh-5); }

.department-item {
    position: relative;
    flex-direction: column;
    width: 100%;
    padding: var(--bh-6);
    color: inherit;
}
.department-item:hover { color: inherit; text-decoration: none; }

.department-item .img-container { display: none; }

.department-item .mask-icon {
    order: -1;
    width: 52px; height: 52px;
    margin-bottom: var(--bh-4);
    border-radius: var(--bh-r-md);
    background: var(--bh-navy-100);
    color: var(--bh-primary);
    font-size: 1.3rem;
}
.department-item:hover .mask-icon { background: var(--bh-primary); color: #fff; }

.department-item .mask { display: flex; flex: 1; }
.department-item .content { display: flex; flex-direction: column; flex: 1; padding: 0; }

.department-item .content h2 {
    margin-bottom: var(--bh-2);
    font-family: var(--bh-font);
    font-size: var(--bh-t-xl);
    font-weight: 600;
    color: var(--bh-heading);
}
.department-item:hover .content h2 { color: var(--bh-primary); }
.department-item .content span {
    display: block;
    margin-bottom: var(--bh-4);
    color: var(--bh-ink-soft);
    font-size: var(--bh-t-md);
}

/* The arrow is an inline SVG with a hard-coded black fill. */
/* The <g> already carries its own transform to position the path, so the nudge
   on hover goes on the wrapper — moving the group would displace the arrow. */
.department-item .svg-wrap {
    margin-top: auto;
    transition: transform .2s var(--bh-ease);
}
.department-item:hover .svg-wrap { transform: translateX(4px); }
.department-item .icon-arrow { fill: var(--bh-navy-600); }
.department-item:hover .icon-arrow { fill: var(--bh-primary); }

.grid__item .grid-content,
.categories .grid-content { height: 100%; }

.box-icon,
.mask-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    margin-bottom: var(--bh-3);
    border-radius: var(--bh-r-md);
    background: var(--bh-navy-100);
    color: var(--bh-primary);
    font-size: 1.3rem;
}

.box-text,
.box-widget { padding: var(--bh-5); }
.box-text h3,
.box-widget h3 {
    font-family: var(--bh-font);
    font-size: var(--bh-t-lg);
    font-weight: 600;
}

/* A department card is one big link, so everything inside it inherits the link
   colour unless told otherwise — which turned every description blue. */
/* Centred, with the icon as a large bare glyph rather than a small badge. A
   department is identified by its mark more than by its name, and at 52px the
   leaf, the ambulance and the padlock are recognisable across the page. */
.bims-dept-card {
    height: 100%;
    text-align: center;
    background: var(--bh-surface);
    border: 1px solid var(--bh-line);
    border-radius: var(--bh-r-md);
    transition: border-color .18s var(--bh-ease),
                box-shadow .18s var(--bh-ease),
                transform .18s var(--bh-ease);
}
.bims-dept-card .box-icon {
    width: auto;
    height: auto;
    margin: 0 0 var(--bh-4);
    background: none;
    border-radius: 0;
    font-size: 3.25rem;
    line-height: 1;
    color: var(--bh-primary);
}
.bims-dept-card .box-icon i { font-size: inherit; }
.bims-dept-card:hover {
    border-color: var(--bh-navy-100);
    box-shadow: var(--bh-shadow-lg);
    transform: translateY(-2px);
}
.bims-dept-card > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
}
.bims-dept-card > a:hover { color: inherit; text-decoration: none; }
.bims-dept-card h3,
.bims-dept-card h4 { color: var(--bh-heading); }
.bims-dept-card p { color: var(--bh-ink-soft); font-size: var(--bh-t-sm); }
.bims-dept-card:hover h3,
.bims-dept-card:hover h4 { color: var(--bh-primary); }

.img-container,
.img-link {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bh-navy-100);
}
.img-container img,
.img-link img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .3s var(--bh-ease);
}
.grid-content:hover .img-link img,
.department-item:hover .img-container img { transform: scale(1.04); }

/* --- News --------------------------------------------------------------- */

.blog-content { padding: var(--bh-8) 0; background: var(--bh-canvas); }
.news-grid > [class*="col-"] { display: flex; margin-bottom: var(--bh-5); }

/* Announcement posters are square: a barangay makes them 1080x1080 for
   Facebook. Anything wider than 1:1 crops the top and bottom off the poster,
   which is where the dates and the headline usually sit — so the window matches
   the source and the whole notice is readable. */
.blog-content .img-link { aspect-ratio: 1 / 1; }

.grid-content .textContent {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--bh-5);
}
.grid-content .textContent h3,
.grid-content .textContent h4 {
    margin-bottom: var(--bh-2);
    font-family: var(--bh-font);
    font-size: var(--bh-t-lg);
    font-weight: 600;
    line-height: 1.35;
    /* Two lines, then an ellipsis at the edge of the card. The template used to
       cut the title to four words, which ended headlines mid-thought. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.grid-content .textContent h3 a { color: var(--bh-heading); }
.grid-content:hover .textContent h3 a { color: var(--bh-primary); text-decoration: none; }

.grid-content .textContent p {
    margin-bottom: var(--bh-4);
    color: var(--bh-ink-soft);
    font-size: var(--bh-t-sm);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Date on one line, department beneath it. Side by side they ran together into
   "30 JULY, 2026IN GENERAL SERVICES OFFICE".
   The markup carries Bootstrap's .d-flex, whose display is !important, so the
   children cannot be made blocks — the column has to come from the flex
   direction instead, which Bootstrap does not force. */
.post-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-bottom: var(--bh-3);
    font-size: var(--bh-t-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.post-meta .date {
    color: var(--bh-ink-mute);
    white-space: nowrap;
}
.post-meta .categories { font-weight: 600; }
.post-meta .categories,
.post-meta .categories a { color: var(--bh-navy-500); }
.post-meta .categories a:hover { color: var(--bh-primary); text-decoration: none; }

.grid-content .read-more { margin-top: auto; align-self: flex-start; }

.page-meta { margin-top: var(--bh-6); }
.page-meta .pagination { justify-content: center; gap: var(--bh-1); }
.page-meta .page-link {
    min-width: 38px;
    padding: 8px 12px;
    border: 1px solid var(--bh-line);
    border-radius: var(--bh-r-sm);
    color: var(--bh-ink-soft);
    text-align: center;
}
.page-meta .page-item.active .page-link {
    background: var(--bh-primary);
    border-color: var(--bh-primary);
    color: #fff;
}

/* --- Officials ---------------------------------------------------------- */

.team-content,
.doctor-list { padding: var(--bh-8) 0; }
.doctor-list > [class*="col-"] { display: flex; margin-bottom: var(--bh-5); }

/* The officials directory is a .grid of .grid__item anchors, each carrying the
   role as a heading, the person's name, and an avatar with office and email.
   Read in that order it is back to front, so the card puts the name first and
   demotes the role to a label above it. */
.doctor-list .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--bh-5);
}

.doctor-list .grid__item {
    display: flex;
    flex-direction: column;
    padding: var(--bh-5);
    background: var(--bh-surface);
    border: 1px solid var(--bh-line);
    border-radius: var(--bh-r-md);
    color: inherit;
    transition: border-color .18s var(--bh-ease),
                box-shadow .18s var(--bh-ease),
                transform .18s var(--bh-ease);
}
.doctor-list .grid__item:hover {
    border-color: var(--bh-navy-100);
    box-shadow: var(--bh-shadow-lg);
    transform: translateY(-2px);
    color: inherit;
    text-decoration: none;
}

/* The role, set as an h2 in the markup but doing the job of a label. */
.doctor-list .title--preview {
    order: -1;
    margin: 0 0 var(--bh-1);
    color: var(--bh-navy-500);
    font-family: var(--bh-font);
    font-size: var(--bh-t-xs);
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.doctor-list .dr-name {
    display: block;
    margin-bottom: var(--bh-4);
    color: var(--bh-heading);
    font-family: var(--bh-font);
    font-size: var(--bh-t-xl);
    font-weight: 600;
    line-height: 1.3;
}
.doctor-list .grid__item:hover .dr-name { color: var(--bh-primary); }

/* Empty in the markup — it held a decorative spinner in the template. */
.doctor-list .loader { display: none; }

.doctor-list .meta--preview {
    display: grid;
    grid-template-columns: 46px 1fr;
    grid-template-areas: "avatar position" "avatar email";
    align-items: center;
    gap: 2px var(--bh-3);
    margin-top: auto;
    padding-top: var(--bh-4);
    border-top: 1px solid var(--bh-line-soft);
}
.doctor-list .meta__avatar {
    grid-area: avatar;
    width: 46px; height: 46px;
    border-radius: var(--bh-r-pill);
    object-fit: cover;
    background: var(--bh-navy-100);
}
.doctor-list .meta__position {
    grid-area: position;
    color: var(--bh-ink);
    font-size: var(--bh-t-sm);
    font-weight: 600;
}
.doctor-list .meta__email {
    grid-area: email;
    color: var(--bh-ink-mute);
    font-size: var(--bh-t-sm);
    word-break: break-word;
}

.member-header { position: relative; aspect-ratio: 4 / 5; background: var(--bh-navy-100); overflow: hidden; }
.member-header img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.member-info { padding: var(--bh-5); text-align: center; }
.dr-name,
.member-info h3,
.member-info h4 {
    margin-bottom: var(--bh-1);
    font-family: var(--bh-font);
    font-size: var(--bh-t-lg);
    font-weight: 600;
}
.member-info .meta__position,
.member-info .designation {
    display: block;
    margin-bottom: var(--bh-2);
    color: var(--bh-navy-500);
    font-size: var(--bh-t-sm);
    font-weight: 600;
}
.member-info .meta__email { color: var(--bh-ink-mute); font-size: var(--bh-t-sm); word-break: break-word; }

.member-social {
    display: flex;
    justify-content: center;
    gap: var(--bh-2);
    margin-top: var(--bh-3);
}
.member-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: var(--bh-r-pill);
    background: var(--bh-navy-050);
    color: var(--bh-navy-600);
    font-size: .8rem;
}
.member-social a:hover { background: var(--bh-primary); color: #fff; }

.meta { display: flex; align-items: center; gap: var(--bh-3); }
.meta__avatar { width: 44px; height: 44px; border-radius: var(--bh-r-pill); object-fit: cover; }

/* --- Partners ----------------------------------------------------------- */

.partners-content { padding: var(--bh-7) 0; border-top: 1px solid var(--bh-line-soft); }
.partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--bh-4);
}
/* In full colour. These are the seals of the City of Pasig, DILG, DSWD, DOH,
   PhilHealth and the PSA — a resident recognises them by their colour, and
   greying them out to keep the page calm hid the very thing they are for. */
/* Full size. At 62px these were stamps; the seals carry text around their rims
   that is unreadable much below this, which is the point of showing them. */
.partner-logo img {
    max-height: 156px;
    max-width: 100%;
    width: auto;
    transition: transform .2s var(--bh-ease);
}
.partner-logo:hover img { transform: scale(1.05); }


/* ==========================================================================
   9. Inner pages
   ========================================================================== */

/* The banner sits behind the title as a layer of its own: the carousel fills
   the header, the wash goes over it, and the heading sits on top.
   Without a height on the image the whole strip collapsed and the banner never
   appeared, which is how this ran as flat navy for a while. */
.page-header { position: relative; background: var(--bh-navy-800); overflow: hidden; }

.page-header-carousel {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.page-header-carousel .owl-stage-outer,
.page-header-carousel .owl-stage,
.page-header-carousel .owl-item,
.page-header-carousel .carouselItem { height: 100%; }

.page-header-carousel .carousel-item-img {
    height: 100%;
    min-height: 260px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* Owl's dots would sit on top of the heading. */
.page-header-carousel .owl-nav,
.page-header-carousel .owl-dots { display: none; }

.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(0, 26, 61, .90), rgba(0, 26, 61, .55));
    z-index: 1;
}
.page-header-content { position: relative; z-index: 2; }

.page-header-content {
    padding: var(--bh-8) 0;
    text-align: center;
    color: var(--bh-on-primary-soft);
}
.page-header-content h1,
.page-header-content h2 { color: #fff; margin-bottom: var(--bh-3); }
.page-header-content p { max-width: 62ch; margin: 0 auto; color: var(--bh-on-primary-mute); }

/* The phone panel that sits beside the page title. */
.carousel-item-content {
    display: block;
    padding: var(--bh-5);
    background: rgba(255, 255, 255, .08);
    border-radius: var(--bh-r-md);
    color: #fff;
    text-align: center;
}
.carousel-item-content:hover { background: rgba(255, 255, 255, .14); color: #fff; text-decoration: none; }
/* .help-title was an h3, which put "Need help? Call us" above the page's own
   h1 in the document order. It is a label on a telephone link, so it is a span
   now and keeps the same appearance. */
.carousel-item-content h3,
.carousel-item-content .help-title {
    display: block;
    color: #fff;
    font-family: var(--bh-font);
    font-size: var(--bh-t-lg);
    font-weight: 600;
    margin-bottom: var(--bh-2);
}

.breadcrumbs,
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-2);
    margin: 0;
    padding: 0;
    background: none;
    color: var(--bh-on-primary-dim);
    font-size: var(--bh-t-sm);
    list-style: none;
}
.breadcrumb-item + .breadcrumb-item::before { content: '/'; padding-right: var(--bh-2); color: var(--bh-on-primary-faint); }
.breadcrumbs a,
.breadcrumb a { color: var(--bh-on-primary-soft); }
.breadcrumbs a:hover,
.breadcrumb a:hover { color: var(--bh-accent); }

/* .content is deliberately NOT given page padding here: the departments page
   uses the same class name for the body of a card, and a section's worth of
   padding inside a card pushes its own text out of it. */
.content-wrapper { padding: 0; }
.header-text { max-width: 68ch; }

/* The index of department groups above the cards. */
.headerContent { padding: var(--bh-7) 0 var(--bh-5); }
.headerContent .catLink { margin-bottom: var(--bh-5); }
.headerContent .catLink-title {
    display: flex;
    align-items: center;
    gap: var(--bh-2);
    margin-bottom: var(--bh-3);
    padding-bottom: var(--bh-2);
    border-bottom: 2px solid var(--bh-line-soft);
    color: var(--bh-heading);
    font-family: var(--bh-font);
    font-size: var(--bh-t-md);
    font-weight: 600;
}
.headerContent .bims-group-icon { color: var(--bh-primary); }
.headerContent .catLink ul { margin: 0; }
.headerContent .catLink li { margin-bottom: var(--bh-1); }
.headerContent .catLink a { color: var(--bh-ink-soft); font-size: var(--bh-t-sm); }
.headerContent .catLink a:hover { color: var(--bh-primary); text-decoration: none; }


/* ==========================================================================
   Services catalogue
   ==========================================================================
   The categories and services maintained under Services, the ones residents
   book. Cards rather than a list, because each carries a fee, requirements and
   sometimes a referral note, and those need room to sit apart from the name.
   ========================================================================== */

.service-list { padding: var(--bh-8) 0; }

.bims-svc-group { margin-bottom: var(--bh-7); }
.bims-svc-group__title {
    margin: 0 0 var(--bh-2);
    padding-bottom: var(--bh-3);
    border-bottom: 2px solid var(--bh-line-soft);
    font-family: var(--bh-font);
    font-size: var(--bh-t-xl);
    font-weight: 600;
    color: var(--bh-primary);
}
.bims-svc-group__intro { margin-bottom: var(--bh-5); color: var(--bh-ink-mute); }

.bims-svc-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: var(--bh-4);
}

.bims-svc {
    display: flex;
    gap: var(--bh-4);
    padding: var(--bh-5);
    background: var(--bh-surface);
    border: 1px solid var(--bh-line);
    border-radius: var(--bh-r-md);
    transition: border-color .18s var(--bh-ease), box-shadow .18s var(--bh-ease);
}
.bims-svc:hover { border-color: var(--bh-navy-100); box-shadow: var(--bh-shadow-md); }

.bims-svc__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px; height: 44px;
    border-radius: var(--bh-r-md);
    background: var(--bh-navy-100);
    color: var(--bh-primary);
    font-size: 1.15rem;
}
/* The icon is usually an emoji chosen on the Services screen, not a glyph font. */
.bims-svc__emoji { font-size: 1.35rem; line-height: 1; }

.bims-svc__body { min-width: 0; }
.bims-svc__name {
    margin: 2px 0 var(--bh-2);
    font-family: var(--bh-font);
    font-size: var(--bh-t-md);
    font-weight: 600;
    color: var(--bh-heading);
}
.bims-svc__desc { margin-bottom: var(--bh-2); color: var(--bh-ink-soft); font-size: var(--bh-t-sm); }
.bims-svc__req {
    margin-bottom: var(--bh-3);
    padding-left: var(--bh-3);
    border-left: 3px solid var(--bh-accent);
    color: var(--bh-ink-mute);
    font-size: var(--bh-t-sm);
}

.bims-svc__meta { display: flex; flex-wrap: wrap; gap: var(--bh-2); }
.bims-svc__fee,
.bims-svc__flag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--bh-r-pill);
    font-size: var(--bh-t-xs);
    font-weight: 600;
}
.bims-svc__fee  { background: var(--bh-good-bg); color: var(--bh-good-fg); }
.bims-svc__flag { background: var(--bh-warn-bg); color: var(--bh-warn-fg); }

.bims-svc-cta { margin: var(--bh-2) 0 var(--bh-7); }


/* ==========================================================================
   10. Contact
   ========================================================================== */

.map-content iframe { display: block; border: 0; }

.contact-content { padding: var(--bh-8) 0; }
.contact-header { margin-bottom: var(--bh-6); }
.superheadline {
    display: block;
    color: var(--bh-navy-500);
    font-family: var(--bh-font);
    font-size: var(--bh-t-xs);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.headline {
    display: block;
    margin-top: var(--bh-2);
    color: var(--bh-heading);
    font-family: var(--bh-font-display);
    font-size: var(--bh-t-3xl);
    font-weight: 700;
    line-height: 1.2;
}
.contect-des .contact-header p { max-width: 60ch; margin-top: var(--bh-3); }

/* The four detail tiles: address, email, hours, phone. */
/* Sized to its content. An earlier height:100% stretched every tile to match
   the tallest in the row, which left two lines of text floating in a tall box. */
.contact-service {
    display: flex;
    align-items: flex-start;
    gap: var(--bh-4);
    margin-bottom: var(--bh-4);
    padding: var(--bh-5);
    background: var(--bh-canvas);
    border: 1px solid var(--bh-line-soft);
    border-radius: var(--bh-r-md);
}
.contact-service i,
.contact-service [class*="flaticon-"] {
    flex: 0 0 auto;
    color: var(--bh-primary);
    font-size: 1.5rem;
    line-height: 1;
}
.contact-service .media-body h5,
.contact-service .media-body h4 {
    margin-bottom: var(--bh-1);
    font-family: var(--bh-font);
    font-size: var(--bh-t-md);
    font-weight: 600;
}
.contact-service .media-body,
.contact-service .media-body div { color: var(--bh-ink-mute); font-size: var(--bh-t-sm); }
.addressLink { color: var(--bh-navy-600); }

.contact-form {
    padding: var(--bh-6);
    background: var(--bh-surface);
    border: 1px solid var(--bh-line);
    border-radius: var(--bh-r-lg);
    box-shadow: var(--bh-shadow-md);
}
.contact-form .form-group { margin-bottom: var(--bh-4); }
.contact-form h3,
.contact-form h2 { margin-bottom: var(--bh-5); }

/* The sidebar cards on the services and article pages. */
.sideber-right .contactCard {
    margin-bottom: var(--bh-4);
    padding: var(--bh-5);
    background: var(--bh-primary);
    border-radius: var(--bh-r-md);
    color: var(--bh-on-primary-soft);
}
.contactCard-title { margin-bottom: var(--bh-3); color: #fff; font-family: var(--bh-font); font-size: var(--bh-t-lg); }
.contactCard-icon { display: flex; align-items: center; gap: var(--bh-2); color: #fff; font-size: var(--bh-t-lg); font-weight: 600; }
.sideber-right .contactCard a { color: var(--bh-on-primary-soft); }
.sideber-right .contactCard a:hover { color: var(--bh-accent); }
.sideber-right .contactCard .link-underlined::after { background: var(--bh-accent); }


/* ==========================================================================
   11. Footer
   ========================================================================== */

/* One notch off the near-black the rest of the navy scale ends at, so the
   footer reads as the end of the page rather than a hole cut in it, and text on
   it clears 7:1 rather than scraping a pass. */
.main-footer {
    padding: var(--bh-7) 0 var(--bh-6);
    background: var(--bh-navy-800);
    color: var(--bh-on-primary-mute);
    font-size: var(--bh-t-md);
}
.bh-footer-top { padding-bottom: var(--bh-6); }

/* The link row that replaced two columns of lists. Wraps on narrow screens
   rather than becoming a stack, so it stays one band. */
.bh-footer-nav {
    padding-top: var(--bh-5);
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.bh-footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-2) var(--bh-5);
    margin: 0;
}
.bh-footer-nav a {
    color: var(--bh-on-primary-mute);
    font-size: var(--bh-t-sm);
}
.bh-footer-nav a:hover { color: var(--bh-accent); }
.main-footer a { color: var(--bh-on-primary-mute); }
.main-footer a:hover { color: var(--bh-accent); text-decoration: none; }

.footer-title {
    margin-bottom: var(--bh-4);
    color: #fff;
    font-family: var(--bh-font);
    font-size: var(--bh-t-md);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.footer-des .des { max-width: 42ch; }
.footer-logo { max-height: 62px; margin-bottom: var(--bh-4); }

.footer-link { margin: 0; }
.footer-link li { margin-bottom: var(--bh-2); }
.footer-link a { display: inline-block; }

/* Quick links stay in one column: two columns of barangay service names wrap
   into each other and stop reading as a list. */
.footer-link.quickLink { column-count: 1; }

/* The street address opens the column, so it is set as text rather than left
   at the muted body colour, where it read as a disabled link. */
.addressLink p {
    margin-bottom: var(--bh-4);
    padding-bottom: var(--bh-4);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    color: var(--bh-on-primary-mute);
    font-weight: 500;
}
.addressLink ul { margin: 0; }

/* The label and the value are loose text and an anchor with no wrapper between
   them, so the row cannot be a flex container — that would make each a separate
   flex item and break the line. The icon is positioned out of the text flow
   instead, which keeps "Phone No: 641-4604" reading as one line. */
.addressLink li {
    position: relative;
    margin-bottom: var(--bh-3);
    padding-left: 28px;
    line-height: 1.5;
}
.addressLink li i {
    position: absolute;
    left: 0;
    top: 4px;
    color: var(--bh-accent);
}
.addressLink li a { font-weight: 600; }

.btnBlock { margin-top: var(--bh-4); }
.main-footer .btnBlock .btn-link { color: var(--bh-accent); }
.main-footer .btnBlock .btn-link:hover { color: #fff; }

.sub-footer {
    margin-top: 0;
    padding: var(--bh-4) 0;
    background: var(--bh-navy-900);
    color: var(--bh-on-primary-faint);
    font-size: var(--bh-t-sm);
    text-align: center;
}
.sub-footer .coptText { margin: 0; }
.sub-footer a { color: var(--bh-on-primary-dim); }


/* ==========================================================================
   12. Responsive, motion and print
   ========================================================================== */

@media (max-width: 1199.98px) {
    .helpInfo { padding-left: var(--bh-4); }
}

@media (max-width: 991.98px) {
    .middBar { padding: var(--bh-4) 0; }
    .middBar .main-logo img { max-height: 58px; }

    .grid-inner.bims-strip { margin-top: var(--bh-6); }
    .about-wrapper,
    .blog-content,
    .team-content,
    .doctor-list,
    .service-list,
    .department-list,
    .contact-content { padding: var(--bh-7) 0; }
}

@media (max-width: 767.98px) {
    body { font-size: var(--bh-t-md); }

    .topBar { font-size: var(--bh-t-xs); }
    .topBar .info-outer { gap: var(--bh-3); }

    .slide-table { height: auto; }
    .slide-tablecell { display: block; padding: var(--bh-8) 0; }
    .slide-text p { font-size: var(--bh-t-md); }
    .slide-buttons .btn { width: 100%; }

    .header-slider .owl-nav { display: none; }

    .bims-strip .coloumn.c-box-1,
    .bims-strip .coloumn.c-box-2,
    .bims-strip .coloumn.c-box-3 { flex-direction: column; }

    .bims-svc-list { grid-template-columns: 1fr; }

    .contact-form { padding: var(--bh-5); }

    .main-footer { padding-top: var(--bh-7); }
    .main-footer [class*="col-"] + [class*="col-"] { margin-top: var(--bh-5); }

    .section-title { text-align: left; }
    .section-title h2::after,
    .section-title .title::after { margin-left: 0; }
}

/* Anyone who has asked their system to stop animating gets a still page. The
   carousel still advances; it simply does not slide or fade to do it. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .grid-content:hover,
    .department-item:hover,
    .team-member:hover { transform: none; }
}

/* Residents print certificates and service lists from these pages, so the
   furniture comes off and the ink goes on the content. */
@media print {
    .topBar,
    .middBar,
    .navbar,
    .sidebar-nav,
    .overlay,
    #toTop,
    .header-slider,
    .main-footer,
    .sub-footer,
    .contact-form,
    .map-content,
    .no-print { display: none !important; }

    body { background: #fff; color: #000; font-size: 11pt; }
    a { color: #000; text-decoration: underline; }
    /* A link is useless on paper unless its destination is printed with it. */
    .content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }

    .bims-svc,
    .grid-content,
    .department-item,
    .team-member {
        border: 1px solid #999;
        box-shadow: none;
        break-inside: avoid;
    }
    h1, h2, h3 { break-after: avoid; }
}

/* ---------------------------------------------------------------
   Share this
   Used on the article, department and service pages. The markup it
   replaces was styled only in the licensed stylesheet, so since that
   was dropped the row rendered as bare list items.
   --------------------------------------------------------------- */
.bh-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 28px 0 8px;
    padding-top: 20px;
    border-top: 1px solid var(--bh-line);
}

.bh-share__label {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bh-ink-mute);
    margin-right: 2px;
}

.bh-share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--bh-line);
    border-radius: 50%;
    background: var(--bh-surface);
    color: var(--bh-ink-soft);
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.bh-share__btn:hover,
.bh-share__btn:focus-visible {
    background: var(--bh-navy-700);
    border-color: var(--bh-navy-700);
    color: #fff;
    text-decoration: none;
}

/* Confirms the copy happened — without it the button looks inert. */
.bh-share__btn--copy.is-copied {
    background: var(--bh-good-bg);
    border-color: var(--bh-good-fg);
    color: var(--bh-good-fg);
}

@media print {
    .bh-share { display: none; }
}

/* ---------------------------------------------------------------
   Official profile (/officials/profile/N)
   Lifted out of an inline <style> block on the page itself, where
   it duplicated the palette above as raw hex. Same rules, tokens
   instead of literals, so a change to the navy happens once.
   --------------------------------------------------------------- */
.of-wrap   { background: var(--bh-canvas); padding: 40px 0 60px; }

.of-crumb   { font-size: 13px; color: var(--bh-ink-mute); margin-bottom: 18px; }
.of-crumb a { color: var(--bh-navy-700); text-decoration: none; }

.of-card {
    background: var(--bh-surface);
    border: 1px solid var(--bh-line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0, 48, 103, .06);
    max-width: 920px;
    margin: 0 auto;
}

.of-band { height: 96px; background: linear-gradient(120deg, var(--bh-navy-600), var(--bh-navy-700)); }

.of-top { display: flex; gap: 24px; padding: 0 32px 24px; margin-top: -52px; flex-wrap: wrap; }

.of-photo {
    width: 132px; height: 132px;
    border-radius: 14px;
    object-fit: cover;
    border: 4px solid var(--bh-surface);
    background: var(--bh-surface);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
    flex: 0 0 auto;
}

.of-head { padding-top: 60px; flex: 1 1 260px; }
.of-name { font-size: 26px; font-weight: 800; color: var(--bh-navy-900); margin: 0; }

.of-pos {
    display: inline-block;
    margin-top: 6px;
    background: var(--bh-navy-100);
    color: var(--bh-navy-700);
    font-weight: 600;
    font-size: 13px;
    padding: 4px 12px;
    border-radius: 999px;
}

.of-dept   { color: var(--bh-ink-mute); font-size: 14px; margin: 8px 0 0; }
.of-dept i { color: var(--bh-gold-500); margin-right: 5px; }

.of-body  { padding: 8px 32px 32px; }
.of-title { font-size: 15px; font-weight: 600; color: var(--bh-ink); margin: 14px 0 4px; }
.of-bio   { color: var(--bh-ink-soft); font-size: 15px; line-height: 1.7; margin: 6px 0 22px; }

.of-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }

.of-item {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--bh-canvas);
    border: 1px solid var(--bh-line-soft);
    border-radius: 10px;
    padding: 12px 14px;
}
.of-item i   { color: var(--bh-navy-700); font-size: 16px; width: 20px; text-align: center; margin-top: 2px; }
.of-item .k  { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--bh-ink-mute); }
.of-item .v  { font-size: 14.5px; color: var(--bh-ink); word-break: break-word; }

.of-social   { margin-top: 22px; }
.of-social a {
    display: inline-flex; width: 38px; height: 38px;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--bh-navy-700);
    color: #fff;
    margin-right: 8px;
    text-decoration: none;
}

.of-back       { display: inline-block; margin: 26px auto 0; color: var(--bh-navy-700); font-weight: 600; text-decoration: none; }
.of-back:hover { color: var(--bh-navy-600); }

/* Contact page: the address, hours, email and phone blocks. The email and
   phone are links so they open a mail app or dial on a phone; they inherit the
   muted colour of the block rather than turning link-blue, so the page reads
   exactly as it did when they were plain text. */
.contact-service .media-body a { color: inherit; }
.contact-service .media-body a:hover { color: var(--bh-primary); text-decoration: underline; }

/* ---------------------------------------------------------- skip to content
   Off-screen until it takes focus, then it lands top-left over everything. A
   keyboard user otherwise tabs through nine navigation links and two buttons
   before reaching the first word of the page, on every page. */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: 12px 20px;
    background: var(--bh-navy-800);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-bottom-right-radius: 6px;
}
.skip-to-content:focus {
    left: 0;
    color: #fff;
    outline: 3px solid var(--bh-accent);
    outline-offset: -3px;
}

/* Present to a screen reader, absent to everyone else. Used for the homepage
   heading, where the visible headline belongs to the slider and rotates. Not
   display:none, which would take it out of the accessibility tree too. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}