@charset "utf-8";
/* ============================================================
   BROWNSVILLE ENERGY AUTHORITY — RESPONSIVE LAYER
   ------------------------------------------------------------
   Loaded AFTER style.css on every page.

   The desktop design is left alone apart from ONE deliberate
   change, in section 0, which lines the slider and footer panels
   up with the content panel. Everything else lives inside a
   max-width query.

   Breakpoints
     >= 992px  desktop ............ fixed 960 grid
     <= 991px  tablet / mobile .... fluid, hamburger nav
     <= 640px  phone .............. single column, stacked
     <= 420px  small phone ........ tightened spacing

   Why the desktop cut-off is 992 and not 960: the fixed layout
   is 960px of grid plus #content's 30px of padding and 2px of
   border, so it needs 992px to fit. Switching at 960 left a
   960-991px window where the page overflowed by ~31px.
   ============================================================ */


/* ============================================================
   00. STRAY "NEW WINDOW" ARROW ON IMAGE LINKS
   ------------------------------------------------------------
   style.css appends a small arrow after every target="_blank"
   link, and suppresses it on image-only links via
   .img-ext-link. But the two rules are:

       a[target="_blank"]:not(.aw-widget-legal)::after   (0,2,1)
       a.img-ext-link::after                             (0,1,1)

   so the suppression never actually won. The result was a lone
   arrow (plus an inherited underline) floating under the Pay
   Bill banner on the home page, at every screen size.
   ============================================================ */

a[target="_blank"].img-ext-link::after {
    content: none;
}


/* ============================================================
   0. DESKTOP PANEL ALIGNMENT  (>= 992px)
   ------------------------------------------------------------
   The ONE intentional desktop change in this file.

   style.css is content-box, so each band ends up a different
   outer width:

       #header           960px   (no padding, no border)
       .slidebackground  962px   (930 + 30 padding + 2 border)
       #content          992px   (960 + 30 padding + 2 border)
       #footer           962px   (960 +  0 padding + 2 border)

   so the content panel visibly bulged 15px past the slider and
   the footer on both sides. Widening the slider and footer to
   992px lines all three up.

   Deliberately done this way round rather than shrinking
   #content: interior pages put .grid_9 (720px) beside .grid_3
   (210px) plus 20px of margins = 950px, which needs the full
   960px content box. Narrowing it would drop every sidebar
   below the article.
   ============================================================ */

@media only screen and (min-width: 992px) {

    /* 960 + 30 padding + 2 border = 992, matching #content */
    .slidebackground {
        width: 960px;
        height: auto;
    }

    /* 960 x (250/930) = 258, so the native 930x250 artwork keeps
       its exact aspect ratio at the wider size */
    .slide930 {
        width: 960px;
        height: 258px;
    }

    /* jQuery Cycle writes the old 930x250 onto each slide as an
       inline style at init, so these need !important or the
       artwork leaves a 30px gap at the right of the panel. */
    .slideshowitem {
        width: 960px !important;
        height: 258px !important;
    }

    .slideshowitem img {
        width: 100%;
        height: 100%;
        object-fit: cover;   /* ratio is identical, so nothing crops */
        display: block;
    }

    /* 960 + 30 padding + 2 border = 992, matching #content */
    #footer {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* style.css only sets padding-left; index.html used to carry
       an inline padding-right:15px, which has been removed so the
       mobile gutters can be controlled from here. Restate it for
       desktop so #content keeps its symmetric 992px outer box. */
    #content {
        padding-right: 15px;
    }
}


/* ============================================================
   0b. SLIDESHOW CHROME — pause only, revealed on hover
   ------------------------------------------------------------
   Pager dots and the prev/next arrows are removed at every
   screen size. Only the pause toggle remains, sitting in the
   bottom-right corner of the artwork.

   The pause control is NOT optional. The slideshow starts by
   itself and advances every 5 seconds, and WCAG 2.2.2 (Pause,
   Stop, Hide) requires a way to stop content that moves
   automatically for more than five seconds.

   Hover-reveal is therefore gated on (hover: hover), because a
   touch screen has no hover state — on a phone a hover-only
   control would never appear at all, leaving no way to stop the
   motion. Touch devices keep it visible but dialled back.
   ============================================================ */

/* Dots and arrows: gone everywhere */
#slidenav,
#slide-prev,
#slide-next {
    display: none;
}

/* style.css insets the controls 20px from the panel edge, and the
   desktop panel carries 15px of padding, which left the button
   only 5px inside the artwork. 28px puts it 13px in. */
#slidecontrols {
    right: 28px;
    bottom: 28px;
}

/* Devices with a real pointer: fade the pause button in on hover.
   :focus-within keeps it reachable by keyboard — opacity is used
   rather than visibility/display so the button stays in the tab
   order and reveals itself when focused. */
@media (hover: hover) and (pointer: fine) {

    #slidecontrols {
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
    }

    .slidebackground:hover #slidecontrols,
    .slidebackground:focus-within #slidecontrols {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Touch devices: no hover exists, so keep it present but quiet */
@media (hover: none) {

    #slidecontrols {
        opacity: 0.75;
    }
}


/* ============================================================
   1. MOBILE NAV — chrome for the drawer built by
      js/site-responsive.js. Hidden entirely on desktop.
   ============================================================ */

.nav-toggle,
.nav-backdrop,
.mobile-drawer {
    display: none;
}

@media only screen and (max-width: 991px) {

    /* -- Hamburger button ------------------------------------ */
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: 48px;
        min-height: 48px;
        padding: 6px 12px;
        margin: 0;
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.55);
        border-radius: 6px;
        color: #fff;
        font: bold 14px/1 Tahoma, Geneva, sans-serif;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .nav-toggle:hover {
        background: rgba(255, 255, 255, 0.26);
    }

    .nav-toggle:focus-visible {
        outline: 3px solid #fff;
        outline-offset: 2px;
    }

    .nav-toggle .bars {
        display: block;
        width: 22px;
        height: 16px;
        position: relative;
        flex: 0 0 auto;
    }

    .nav-toggle .bars i {
        position: absolute;
        left: 0;
        display: block;
        width: 100%;
        height: 2.5px;
        background: #fff;
        border-radius: 2px;
        transition: transform .25s ease, opacity .2s ease, top .25s ease;
    }

    .nav-toggle .bars i:nth-child(1) { top: 0; }
    .nav-toggle .bars i:nth-child(2) { top: 6.5px; }
    .nav-toggle .bars i:nth-child(3) { top: 13px; }

    /* Morph into an X while the drawer is open */
    .nav-toggle[aria-expanded="true"] .bars i:nth-child(1) {
        top: 6.5px;
        transform: rotate(45deg);
    }
    .nav-toggle[aria-expanded="true"] .bars i:nth-child(2) {
        opacity: 0;
    }
    .nav-toggle[aria-expanded="true"] .bars i:nth-child(3) {
        top: 6.5px;
        transform: rotate(-45deg);
    }

    /* -- Dim layer behind the drawer -------------------------- */
    .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        opacity: 0;
        visibility: hidden;
        transition: opacity .28s ease, visibility .28s ease;
        z-index: 10000;
    }

    .nav-backdrop.is-open {
        opacity: 1;
        visibility: visible;
    }

    /* -- The drawer itself ------------------------------------ */
    .mobile-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(88vw, 360px);
        background: #006BBB;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.35);
        transform: translateX(102%);
        transition: transform .28s ease;
        z-index: 10001;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-drawer.is-open {
        transform: translateX(0);
    }

    .mobile-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 10px 10px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.28);
        flex: 0 0 auto;
    }

    .mobile-drawer-head .title {
        color: #fff;
        font: bold 15px/1 Tahoma, Geneva, sans-serif;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    .drawer-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.55);
        border-radius: 6px;
        color: #fff;
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
    }

    .drawer-close:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    .drawer-close:focus-visible {
        outline: 3px solid #fff;
        outline-offset: 2px;
    }

    /* -- Drawer link list ------------------------------------- */
    .mobile-drawer .mdl {
        list-style: none;
        margin: 0;
        padding: 0 0 32px 0;
        overflow-y: auto;
        flex: 1 1 auto;
    }

    .mobile-drawer .mdl ul {
        list-style: none;
        margin: 0;
        padding: 0;
        background: rgba(0, 0, 0, 0.16);
    }

    .mobile-drawer .mdl li {
        margin: 0;
        padding: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }

    /* Row = the link plus (optionally) its expand button */
    .mobile-drawer .mdl-row {
        display: flex;
        align-items: stretch;
        min-height: 48px;
    }

    .mobile-drawer .mdl-row > a,
    .mobile-drawer .mdl-row > .mdl-label {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 12px 16px;
        color: #fff;
        font: bold 15px/1.3 Tahoma, Geneva, sans-serif;
        text-decoration: none;
        text-shadow: none;
    }

    .mobile-drawer .mdl-row > a:hover,
    .mobile-drawer .mdl-row > a:focus {
        background: rgba(255, 255, 255, 0.16);
        color: #fff;
        text-decoration: underline;
    }

    .mobile-drawer a:focus-visible,
    .mobile-drawer button:focus-visible {
        outline: 3px solid #fff;
        outline-offset: -3px;
    }

    /* A top-level item whose href was only a "#" hover stub is
       rendered as a full-width toggle button instead of a link. */
    .mobile-drawer .mdl-row > button.mdl-label {
        width: 100%;
        background: transparent;
        border: 0;
        font-family: Tahoma, Geneva, sans-serif;
        text-align: left;
        cursor: pointer;
        justify-content: space-between;
        gap: 12px;
    }

    .mobile-drawer .chev {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
    }

    .mobile-drawer .chev svg {
        width: 15px;
        height: 15px;
        transition: transform .22s ease;
    }

    .mobile-drawer [aria-expanded="true"] .chev svg {
        transform: rotate(180deg);
    }

    /* Nested levels get progressively lighter + indented */
    .mobile-drawer .mdl ul .mdl-row > a,
    .mobile-drawer .mdl ul .mdl-row > .mdl-label {
        padding-left: 30px;
        font-weight: normal;
        font-size: 14px;
    }

    .mobile-drawer .mdl ul ul .mdl-row > a,
    .mobile-drawer .mdl ul ul .mdl-row > .mdl-label {
        padding-left: 46px;
        font-size: 13.5px;
        color: rgba(255, 255, 255, 0.92);
    }

    /* The small caption under top-level items ("Information") */
    .mobile-drawer .desc {
        display: block;
        font-size: 11px;
        font-weight: normal;
        line-height: 1.2;
        letter-spacing: .4px;
        color: rgba(255, 255, 255, 0.85);
        white-space: normal;
    }

    .mobile-drawer .mdl-row > a > span.label-wrap {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    /* Expand / collapse toggle */
    .mobile-drawer .mdl-exp {
        flex: 0 0 auto;
        width: 52px;
        min-height: 48px;
        padding: 0;
        background: transparent;
        border: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.2);
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-drawer .mdl-exp:hover {
        background: rgba(255, 255, 255, 0.16);
    }

    .mobile-drawer .mdl-exp svg {
        width: 15px;
        height: 15px;
        transition: transform .22s ease;
    }

    .mobile-drawer .mdl-exp[aria-expanded="true"] svg {
        transform: rotate(180deg);
    }

    /* A drawer row that is only a toggle (parent had href="#") */
    .mobile-drawer .mdl-row.is-toggle {
        cursor: pointer;
    }

    .mobile-drawer .mdl-row.is-toggle:hover {
        background: rgba(255, 255, 255, 0.16);
    }

    /* Highlight the page you are on */
    .mobile-drawer .mdl-row > a[aria-current="page"] {
        background: rgba(255, 255, 255, 0.22);
        box-shadow: inset 4px 0 0 #fff;
    }

    /* Stop the page behind the drawer from scrolling */
    body.nav-open {
        overflow: hidden;
    }
}


/* ============================================================
   2. TABLET + MOBILE FOUNDATION  (<= 991px)
      Kills the 960px fixed shell and the box-model overflow.
   ============================================================ */

@media only screen and (max-width: 991px) {

    body {
        min-width: 0;           /* style.css pins this to 960px */
    }

    /* style.css writes "container_12" without the leading dot in
       both of its media queries, so .container_12 kept width:960px
       for every element that was not #content/#footer/#header.
       This is the real fix. */
    .container_12,
    #header,
    #content,
    #footer,
    #bottomfeature,
    #signup {
        width: auto;
        max-width: 100%;
        box-sizing: border-box;  /* style.css is content-box: the
                                    15px padding + 1px borders were
                                    pushing every page 16px wide */
        margin-left: auto;
        margin-right: auto;
    }

    /* Never let media break the viewport */
    img,
    video,
    iframe,
    embed,
    object,
    svg {
        max-width: 100%;
        height: auto;
    }

    /* Long e-mail addresses / URLs must wrap, not overflow */
    #content,
    #footer {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* Grid children must be allowed to shrink below min-content */
    .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6,
    .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
        box-sizing: border-box;
        min-width: 0;
    }

    /* Nicer line breaking (per house standard) */
    #content p,
    #content li,
    #content td {
        text-wrap: pretty;
    }

    #content h1,
    #content h2,
    #content h3,
    #content h4,
    .town-heading,
    .card-heading {
        text-wrap: balance;
    }
}


/* ============================================================
   3. HEADER  (<= 991px)
      Logo left, hamburger right, sticky, comfortable height.
   ============================================================ */

@media only screen and (max-width: 991px) {

    #headerwrap {
        height: auto;
        min-width: 0;
        position: sticky;
        top: 0;
        z-index: 9999;
        background-size: auto 100%;
    }

    #header {
        height: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 14px;
    }

    /* Logo cell */
    #header > .grid_2 {
        width: auto;
        float: none;
        clear: none;
        display: flex;
        align-items: center;
        margin: 0;
    }

    #header > .grid_2 a {
        display: block;
        line-height: 0;
    }

    /* Logo stays prominent and legible — never shrunk to a chip */
    #header > .grid_2 img {
        width: auto;
        height: 74px;
        max-width: none;
        display: block;
    }

    /* Nav cell now only holds the hamburger */
    #nav {
        width: auto;
        float: none;
        clear: none;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    /* The desktop superfish bar is replaced by the drawer */
    #nav .sf-menu {
        display: none;
    }

    /* Legacy <select> mobile nav from js/resolution.js — superseded */
    #nav #mobilenav {
        display: none;
    }
}

@media only screen and (max-width: 420px) {
    #header {
        padding: 6px 10px;
    }

    #header > .grid_2 img {
        height: 60px;
    }

    .nav-toggle .label {
        display: none;      /* icon only on very small phones */
    }

    .nav-toggle {
        padding: 6px 10px;
    }
}


/* ============================================================
   4. HERO SLIDESHOW  (<= 991px)
      style.css hid this below 992px, so phones and tablets lost
      the hero entirely. It is restored here, fluid, with the
      controls moved BELOW the image so nothing ever covers the
      artwork (house standard: controls must not overlap slides).
      jQuery Cycle writes inline width/height, hence !important.
   ============================================================ */

@media only screen and (max-width: 991px) {

    #slidewrap {
        display: block;
        padding-top: 12px;
    }

    #slidewrap .container_12 {
        width: auto;
        max-width: 100%;
    }

    .slidebackground {
        width: auto !important;
        height: auto !important;
        padding: 8px;
        box-sizing: border-box;
        position: relative;
    }

    .slideshow.slide930 {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 930 / 250;   /* the slides' native ratio */
        position: relative;
        overflow: hidden;
    }

    .slideshowitem {
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
    }

    .slideshowitem img {
        width: 100%;
        height: 100%;
        object-fit: cover;         /* ratio matches, so no crop */
        display: block;
    }

    /* The pager dots and prev/next arrows are hidden at every
       width in section 0b, so there is nothing to lay out here.
       Only the pause toggle survives, and it is positioned over
       the artwork in the <= 640px block below. */

    #slidecontrols button {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }
}

/* On a phone the native 930:250 ratio leaves a ~96px sliver that
   reads as a caption strip rather than a hero. Going to 5:2 gives
   it presence. The ratio change is small enough that object-fit
   only trims about 16% off each side, so centred subjects (the
   water tower, the office frontage) stay intact. */
@media only screen and (max-width: 640px) {

    /* Taller hero on phones. See the note below about cropping. */
    .slideshow.slide930 {
        aspect-ratio: 2 / 1;
    }

    .slidebackground {
        padding: 6px;
    }

    /* Dots and arrows are hidden globally in section 0b; this
       block only positions the surviving pause button.
       Offsets are from the panel edge, and the panel carries 6px
       of padding, so 18px here sits 12px inside the artwork. */
    #slidecontrols {
        position: absolute;
        right: 18px;
        bottom: 18px;
        margin: 0;
        gap: 0;
    }

    #slidecontrols button {
        width: 38px;
        height: 38px;
        min-height: 0;          /* beats the generic 44px button rule */
        font-size: 13px;
        background: rgba(0, 0, 0, 0.55);
        border-color: rgba(255, 255, 255, 0.5);
    }
}


/* ============================================================
   5. HOME PAGE SERVICE CARDS  (.boxgreyfull)
      The reported bug: a hard 3-column grid with 1fr tracks.
      1fr floors at min-content, so the 48px icons and long words
      forced the tracks wider than the phone and the whole block
      hung off the right edge. minmax(0,1fr) + column steps fix it.
   ============================================================ */

.boxgreyfull > * {
    min-width: 0;               /* safe at every width, incl. desktop */
}

@media only screen and (max-width: 991px) {
    .boxgreyfull {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        box-sizing: border-box;
    }
}

@media only screen and (max-width: 900px) {
    .boxgreyfull {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 600px) {
    .boxgreyfull {
        grid-template-columns: minmax(0, 1fr);
        grid-gap: 12px;
        padding: 12px;
    }
}

@media only screen and (max-width: 991px) {

    .boxgreyfull .grid_4 {
        width: auto;
        min-width: 0;
        float: none;
        clear: none;
        margin: 0;
    }

    /* The 48px icons float left; stop them squeezing text to 1 word */
    .boxgreyfull .grid_4 .lefticon {
        float: left;
        margin: 0 10px 6px 0;
        padding: 0;
        width: 40px;
        height: 40px;
    }

    .boxgreyfull .grid_4 p {
        overflow-wrap: break-word;
    }

    /* The red "email us / fax us" block was all-caps and unbreakable */
    .boxgreyfull .grid_4 a {
        overflow-wrap: anywhere;
    }

    /* Read-more links need a real tap target. Keep them block (as
       style.css has them) rather than inline-block: some of these
       links are bare URLs, and an inline-block shrink-to-fit box
       cannot break a long URL, which pushed HomePage.html off the
       right edge at 320px. */
    .boxgreyfull .grid_4 a.readmore {
        display: block;
        min-height: 44px;
        line-height: 1.5;
        padding-top: 10px;
        padding-bottom: 10px;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}


/* ============================================================
   6. "WELCOME TO OUR COMMUNITY" BANNER  (.town-banner)
      Second reported bug. It is a flex row with a fixed 210px
      right panel living inside the overflowing card grid, so it
      inherited the overflow and then added its own.
      style.css only stacked it below 600px — too late, and the
      inner columns still could not shrink.
   ============================================================ */

@media only screen and (max-width: 991px) {

    .town-banner {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .town-content {
        min-width: 0;
        padding: 20px 22px;
    }

    .town-content .town-desc {
        max-width: none;
    }

    .blue #content a.town-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 10px 20px;
    }
}

/* Stack well before the columns get uncomfortable (was 600px) */
@media only screen and (max-width: 780px) {

    .town-banner {
        flex-direction: column;
        align-items: stretch;
    }

    /* The red stripe becomes a top rule instead of a side rule */
    .town-accent {
        width: 100%;
        height: 7px;
        flex-shrink: 0;
    }

    .town-right {
        width: 100%;
        min-height: 0;
        padding: 18px 20px 20px;
        box-sizing: border-box;
    }
}

@media only screen and (max-width: 600px) {

    .town-content {
        padding: 18px 16px;
    }

    .town-heading {
        font-size: 19px;
    }
}


/* ============================================================
   7. INTERIOR PAGES — content + sidebar  (<= 991px)
   ============================================================ */

@media only screen and (max-width: 991px) {

    /* Content / sidebar split stays side-by-side on tablet, but
       both must be border-box or they overflow #content. */
    .container_12 .grid_9,
    .container_12 .grid_3 {
        box-sizing: border-box;
    }
}

@media only screen and (max-width: 640px) {

    /* style.css does `#slidewrap, .mobile-hidden, .sidebar {display:none}`
       which silently deleted the Local Weather panel on ~20 pages.
       Bring it back, stacked under the article instead. */
    .sidebar {
        display: block;
        width: 100%;
        float: none;
        clear: both;
        margin: 24px 0 0;
        padding: 0;
        box-sizing: border-box;
    }

    .sidebar .sidebarbox {
        width: auto;
        box-sizing: border-box;
    }

    /* The AccuWeather widget ships 10px type, which fails WCAG
       readability on a phone. Lift its text without touching the
       widget's own layout. The widget injects its <style> at
       runtime, so it wins specificity ties against this file —
       hence the #content prefix rather than a bare .sidebar. */
    #content .sidebar [class^="aw-"],
    #content .sidebar [class*=" aw-"] {
        font-size: 13px;
        line-height: 1.45;
    }

    /* .mobile-hidden is the desktop nav — it stays hidden, the
       drawer replaces it. Re-assert after the .sidebar rule. */
    .mobile-hidden {
        display: none;
    }

    /* (side padding is set in section 11c) */

    /* style.css bumps this to 1.3em; keep it readable but calmer */
    #content,
    #bottomfeature,
    #footer {
        font-size: 1.15em;
        line-height: 1.65em;
    }
}


/* ============================================================
   8. TABLES  (<= 991px)
      Wrapped in .table-scroll by js/site-responsive.js so a wide
      rate table scrolls inside its own box instead of dragging
      the whole page sideways. Staff-Board.html was +161px.
   ============================================================ */

.table-scroll {
    max-width: 100%;
}

@media only screen and (max-width: 991px) {

    .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        margin-bottom: 14px;
    }

    .table-scroll:focus-visible {
        outline: 3px solid #006BBB;
        outline-offset: 2px;
    }

    #content table {
        max-width: 100%;
    }

    #content td,
    #content th {
        word-break: normal;
        overflow-wrap: break-word;
    }

    /* Legacy width="553" / width="100" attributes on cells */
    #content td[width],
    #content th[width] {
        width: auto;
    }
}

@media only screen and (max-width: 640px) {

    #content table {
        font-size: 0.95em;
    }

    /* Deposit / Service risk badges sit in table cells */
    .risk-badge {
        width: 100px !important;   /* inline style on the element */
        height: 80px !important;
        font-size: 12px;
    }
}


/* ============================================================
   9. FOOTER  (<= 991px)
   ============================================================ */

@media only screen and (max-width: 991px) {

    #footer {
        height: auto;
        padding: 16px 14px;
    }

    #footer .grid_6 {
        width: 100%;
        float: none;
        margin: 0;
        text-align: center;
    }

    #footer .alignright {
        text-align: center;
        margin-top: 10px;
    }

    /* 44px tap targets, comfortably spaced */
    #footer a {
        display: inline-block;
        padding: 12px 10px;
        min-height: 44px;
        line-height: 20px;
        box-sizing: border-box;
    }
}


/* ============================================================
   10. FORMS  (<= 991px)
       ApplicationForService.html is the only real form, but the
       rules are generic so anything added later behaves.
   ============================================================ */

@media only screen and (max-width: 991px) {

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="password"],
    select,
    textarea {
        max-width: 100%;
        box-sizing: border-box;
        font-size: 16px;      /* stops iOS Safari zooming on focus */
    }

    button,
    input[type="submit"],
    input[type="button"],
    .submitbutton {
        min-height: 44px;
        font-size: 16px;
    }

    input[type="checkbox"],
    input[type="radio"] {
        width: 20px;
        height: 20px;
    }
}


/* ============================================================
   11. CONTENT TAP TARGETS + MISC  (<= 640px)
   ============================================================ */

@media only screen and (max-width: 640px) {

    /* Standalone links in body copy get a real touch area.
       Inline links inside a sentence are left alone so the
       paragraph does not turn into a ladder. */
    #content a.readmore {
        display: block;               /* never inline-block: see note above */
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
        line-height: 1.5;
        max-width: 100%;
        overflow-wrap: anywhere;      /* bare URLs must be breakable */
    }

    #content p > a:only-child {
        display: inline-block;
        min-height: 44px;
        padding: 10px 0;
        line-height: 1.5;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* The banner image on the home page */
    #content img[width="100%"] {
        width: 100%;
        height: auto;
    }

    .bid-ad-box {
        margin-left: 0;
        margin-right: 0;
    }

    /* Announcement banner */
    .custom-alert {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}


/* ============================================================
   11b. HOME PAGE BANNER SPACING
   ------------------------------------------------------------
   index.html used <br><br> plus an empty <p> to separate the
   Pay Bill banner from the service cards — about 89px of dead
   space on a phone, with nothing in it. Those are gone from the
   markup; the gap is set here instead so it can scale.
   ============================================================ */

.banner-block {
    margin-bottom: 30px;
}

@media only screen and (max-width: 640px) {
    .banner-block {
        margin-bottom: 16px;
    }
}


/* ============================================================
   11c. READING COMFORT  (<= 991px)
   ------------------------------------------------------------
   Deliberately understated: nothing here changes the typeface,
   the colours or the sizes. It only improves how lines break and
   how evenly text sits, so pages read better without looking
   redesigned.
   ============================================================ */

@media only screen and (max-width: 991px) {

    /* Wider side gutters so body copy never runs to the edge.
       Interior pages have no card wrapper, so their text sat
       only 12px from the screen edge. */
    #content {
        padding: 16px 24px;
    }

    /* Let the browser avoid short, stranded last lines in
       paragraphs and keep headings evenly balanced. */
    #content p,
    #content li,
    #content td,
    #content dd {
        text-wrap: pretty;
        orphans: 2;
        widows: 2;
    }

    #content h1,
    #content h2,
    #content h3,
    #content h4,
    #content h5,
    .card-heading,
    .town-heading {
        text-wrap: balance;
    }

    /* Even vertical rhythm between paragraphs — the old markup
       leaned on <p>&nbsp;<br></p> spacers, which stack unevenly. */
    #content p {
        margin-bottom: 0.85em;
    }

    #content p:last-child {
        margin-bottom: 0;
    }

    /* Collapse the legacy <p>&nbsp;<br></p> spacer paragraphs.
       js/site-responsive.js tags these, and only ever tags a
       paragraph with no visible text and no media, so nothing
       that renders is hidden. Nine of them sit on the home page
       at ~32px each. */
    #content p.is-blank-spacer,
    #footer p.is-blank-spacer {
        display: none;
    }

    /* Slightly crisper glyph rendering on high-DPI phones */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

@media only screen and (max-width: 640px) {

    #content {
        padding: 14px 18px;
    }
}


/* ============================================================
   12. MOTION + PRINT
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .mobile-drawer,
    .nav-backdrop,
    .nav-toggle .bars i,
    .mobile-drawer .mdl-exp svg,
    #slidecontrols {
        transition: none !important;
    }
}

@media print {

    .nav-toggle,
    .nav-backdrop,
    .mobile-drawer,
    #slidecontrols,
    #slidenav {
        display: none !important;
    }
}