@charset "UTF-8";

/* ==========================================================================
   1. FONTS
   ========================================================================== */

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 300;
    src: url("../fonts/Rubik-Light.ccaa5c9e923d.eot");
    src: local("Rubik"), url("../fonts/Rubik-Light.ccaa5c9e923d.eot?#iefix") format("embedded-opentype"), url("../fonts/Rubik-Light.6515f0452e7f.woff2") format("woff2"), url("../fonts/Rubik-Light.3485e96a6194.woff") format("woff");
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/Rubik-Regular.a11b01c9540d.eot");
    src: local("Rubik"), url("../fonts/Rubik-Regular.a11b01c9540d.eot?#iefix") format("embedded-opentype"), url("../fonts/Rubik-Regular.8a048451329a.woff2") format("woff2"), url("../fonts/Rubik-Regular.499961d2e17b.woff") format("woff");
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 700;
    src: local("Rubik"), url("../fonts/Rubik-Bold.210bf200b54f.woff2") format("woff2"), url("../fonts/Rubik-Bold.c5be454b6cb1.woff") format("woff");
}

/* ==========================================================================
   2. BASE / GLOBAL
   ========================================================================== */

body {
    font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-weight: 300;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
}

strong {
    font-weight: 500;
}

a {
    color: #007bff;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

a:hover {
    color: #0056b3;
    text-decoration: none;
}

a:not([href]):not([tabindex]),
a:not([href]):not([tabindex]):focus,
a:not([href]):not([tabindex]):hover {
    color: inherit;
    text-decoration: none;
}

.disabled,
:disabled {
    pointer-events: none !important;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.text-muted {
    font-weight: 300;
}

.font-small {
    font-size: 0.85rem;
}

.main {
    flex: 1 0 auto;
}

.main-bg {
    background: rgba(158, 158, 158, 0.1);
}

/* ==========================================================================
   3. COLORS (only classes actually used)
   ========================================================================== */

.indigo {
    background-color: #3f51b5 !important;
}

.blue-text {
    color: #2196f3 !important;
}

.red-text {
    color: #f44336 !important;
}

.white-text {
    color: #fff !important;
}

.white-ic {
    color: #fff !important;
}

.rgba-white-slight,
.rgba-white-slight:after {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

.blockquote {
    padding: 0.5rem 1rem;
    border-left: .25rem solid #eceeef;
}

.blockquote.text-right {
    border-right: .25rem solid #eceeef;
    border-left: none;
}

.blockquote .bq-title {
    margin-bottom: 0;
    font-size: 1.5rem;
    font-weight: 400;
}

.blockquote p {
    padding: 1rem 0;
    font-size: 1.1rem;
}

/* Responsive headings */
.h1-responsive { font-size: 170%; }
.h2-responsive { font-size: 165%; }
.h3-responsive { font-size: 135%; }
.h4-responsive { font-size: 135%; }
.h5-responsive { font-size: 135%; }

@media (width >= 576px) {
    .h1-responsive { font-size: 170%; }
    .h2-responsive { font-size: 170%; }
    .h3-responsive { font-size: 125%; }
    .h4-responsive { font-size: 125%; }
    .h5-responsive { font-size: 125%; }
}

@media (width >= 768px) {
    .h1-responsive { font-size: 200%; }
    .h2-responsive { font-size: 180%; }
    .h3-responsive { font-size: 140%; }
    .h4-responsive { font-size: 125%; }
    .h5-responsive { font-size: 125%; }
}

@media (width >= 992px) {
    .h1-responsive { font-size: 200%; }
    .h2-responsive { font-size: 180%; }
    .h3-responsive { font-size: 140%; }
    .h4-responsive { font-size: 125%; }
    .h5-responsive { font-size: 125%; }
}

@media (width >= 1200px) {
    .h1-responsive { font-size: 250%; }
    .h2-responsive { font-size: 200%; }
    .h3-responsive { font-size: 170%; }
    .h4-responsive { font-size: 140%; }
    .h5-responsive { font-size: 125%; }
}

/* ==========================================================================
   5. VIEW / OVERLAY (blog image overlays)
   ========================================================================== */

.view {
    position: relative;
    overflow: hidden;
    cursor: default;
}

.view .mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-attachment: fixed;
}

.view img, .view video {
    position: relative;
    display: block;
}

.overlay .mask {
    opacity: 0;
    transition: all 0.4s ease-in-out;
}

.overlay .mask:hover {
    opacity: 1;
}

/* ==========================================================================
   6. MAP
   ========================================================================== */

#osm-map {
    height: 300px;
}

.leaflet-popup-content {
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.popup-image {
    width: 100%;
    height: auto;
    margin-top: 6px;
    border-radius: .25rem;
}

/* ==========================================================================
   7. CARDS
   ========================================================================== */

.card {
    font-weight: 400;
    border: 0;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.05);
    border-radius: .25rem;
}

.card[class*="border"] {
    border: 1px solid #9e9e9e;
    box-shadow: none;
}

.card .card-body {
    padding: .75rem .5rem;
}

.card .card-body > .row {
    --bs-gutter-x: 1rem;
}

.temprow .card-body > .row {
    --bs-gutter-x: 0;
}

.card .card-body > h3 {
    padding: 0 0.5rem;
}

.card .card-body h1, .card .card-body h2, .card .card-body h3,
.card .card-body h4, .card .card-body h5, .card .card-body h6 {
    font-weight: 400;
}

.card .card-body .card-title a {
    transition: 0.2s ease-in-out;
}

.card .card-body .card-title a:hover {
    transition: 0.2s ease-in-out;
}

.card .card-body .card-text {
    font-size: 0.9rem;
    font-weight: 400;
    color: #747373;
}

.card-body .richtext-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.card-img-100 {
    width: 100px;
    height: 100px;
}

.card-img-64 {
    width: 64px;
    height: 64px;
}

/* ==========================================================================
   8. WEATHER DATA DISPLAY
   ========================================================================== */

.temprow .lo-text {
    padding-left: 0.8rem !important;
    text-align: left;
}

.temprow .hi-text {
    padding-right: 0.8rem !important;
    text-align: right;
}

.lo-text .stat-label {
    color: #1e88e5;
}

.hi-text .stat-label {
    color: #e53935;
}

.stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    opacity: 0.7;
    margin-bottom: 0;
}

.stat-value {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.3;
}

/* The live cards render this line empty and live_updates.js fills it in once
   the first payload arrives. An empty line is 0px tall, so without the
   reservation every card grows by one line at that moment and pushes all the
   cards below it down - on a phone, where they are stacked, that alone scored
   a CLS of ~0.25. 1.3em is the line's own height, so it follows the font-size
   override below. */
.stat-time {
    font-size: 0.75rem;
    opacity: 0.7;
    line-height: 1.3;
    min-height: 1.3em;
}

/* A reading the station censored in its newest record, so the value shown was
   carried over from an earlier one. Dimmed and dotted-underlined — the same
   "hover me for an explanation" cue as .obs-explained — with the time of the
   reading in the tooltip. Opacity rather than a colour so it needs no separate
   dark-theme rule. */
.obs-value.stale {
    opacity: 0.6;
    border-bottom: 1px dotted currentColor;
    cursor: help;
}

.temprow .h5-responsive {
    margin-bottom: 0.25rem;
}

/* The trend arrow is written after the title by live_updates.js. Taking it out
   of the line keeps it in its inline spot right after the title, but the
   centred title no longer slides sideways whenever the arrow appears, changes
   or goes away. The leading space of the injected markup collapses inside the
   absolute box, hence the margin. */
.obs-trend {
    position: absolute;
    margin-left: 0.3em;
}

.temprow .h2-responsive {
    margin-bottom: 0;
    white-space: nowrap;
}

.temprow .mb-4,
.graphrow .mb-4 {
    margin-top: 0.50rem !important;
    margin-bottom: 0.25rem !important;
}

.temprow.my-4,
.graphrow.my-4 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.5rem !important;
}

/* Chart placeholders are created before their data is fetched. Sizing them
   up front keeps the cards below from being pushed down when the charts draw.
   Highcharts takes its height from the container, and 400px is the height it
   would default to anyway. */
.chart-container {
    width: 100%;
    height: 400px;
    margin-top: 20px;
}

@media (width < 576px) {

    .stat-value {
        font-size: 0.9rem;
    }

    .stat-time {
        font-size: 0.7rem;
    }
}

/* An observation title that carries an explanation: a real button (so it is
   keyboard- and touch-operable) rendered as plain heading text, marked only by
   a dotted underline. Titles without an explanation stay a plain <span>. */
.obs-explained {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    white-space: normal;
    vertical-align: baseline;
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    text-decoration-color: currentColor;
    /* Kept subordinate to the title itself; ignored by browsers without
       color-mix(), which then get the plain currentColor underline above. */
    text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
    transition: text-decoration-color 0.15s ease-in-out;
}

/* Bootstrap's reboot sets `cursor: pointer` via `[type=button]:not(:disabled)`
   (specificity 0-2-0), so the help cursor — the site's convention for tooltip
   triggers, see the almanac icons — has to be reasserted above that. */
button.obs-explained:not(:disabled) {
    cursor: help;
}

.obs-explained:hover,
.obs-explained:focus-visible {
    text-decoration-color: currentColor;
}

.obs-explained:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 2px;
}

/* Readable multi-sentence body, wider than the Bootstrap default 276px */
.popover {
    --bs-popover-max-width: 320px;
    --bs-popover-body-font-size: 0.875rem;
    --bs-popover-header-font-size: 0.9rem;
}

/* ==========================================================================
   9. NAVBAR
   ========================================================================== */

.navbar {
    font-weight: 300;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.05);
    padding-left: 1rem;
    padding-right: 1rem;
}

.navbar .navbar-toggler {
    border-width: 0;
    outline: 0;
    color: #000;
}

.navbar .navbar-collapse {
    padding-top: 5px;
}

.navbar .nav-flex-icons {
    flex-direction: row;
}

@media (width >= 992px) {
    .navbar .navbar-brand {
        min-width: 380px;
    }
}

@media (width < 1400px) {
    .navbar-brand {
        max-width: 350px;
    }
}

.navbar .nav-item .nav-link {
    font-size: 1.2rem;
    display: block;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.navbar .nav-item .nav-link.disabled:active {
    pointer-events: none;
}

.navbar .nav-item .nav-link .fas,
.navbar .nav-item .nav-link .fab,
.navbar .nav-item .nav-link .far {
    padding-right: 3px;
    padding-left: 3px;
}

.navbar .breadcrumb {
    padding: 0.3rem 0 0 1rem;
    margin: 0;
    font-size: 15px;
    font-weight: 300;
    background-color: inherit;
}

.navbar .breadcrumb .breadcrumb-item {
    color: #fff;
}

.navbar .breadcrumb .breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.65);
}

.navbar .breadcrumb .breadcrumb-item:before {
    color: rgba(255, 255, 255, 0.65);
}

.navbar .dropdown-menu {
    position: absolute !important;
    margin-top: 0;
}

.navbar .dropdown-menu a {
    padding: 10px;
    font-size: 0.9375rem;
    font-weight: 300;
}

.navbar .dropdown-menu a:not(.active) {
    color: #000;
}

/* Light theme navbar */
.navbar.navbar-light .navbar-nav .nav-item .nav-link.disbled,
.navbar.navbar-light .navbar-nav .nav-item .nav-link.disbled:hover {
    color: rgba(0, 0, 0, 0.3);
}

.navbar.navbar-light .navbar-toggler-icon {
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar.navbar-light .breadcrumb .nav-item .nav-link,
.navbar.navbar-light .navbar-nav .nav-item .nav-link {
    color: #000;
    transition: 0.35s;
}

.navbar.navbar-light .breadcrumb .nav-item .nav-link:hover,
.navbar.navbar-light .navbar-nav .nav-item .nav-link:hover {
    color: rgba(0, 0, 0, 0.7);
}

.navbar.navbar-light .breadcrumb .nav-item.active > .nav-link,
.navbar.navbar-light .navbar-nav .nav-item.active > .nav-link {
    background-color: rgba(0, 0, 0, 0.1);
}

.navbar.navbar-light .breadcrumb .nav-item.active > .nav-link:hover,
.navbar.navbar-light .navbar-nav .nav-item.active > .nav-link:hover {
    color: #000;
}

/* Dark theme navbar */
.navbar.navbar-dark .navbar-nav .nav-item .nav-link.disbled,
.navbar.navbar-dark .navbar-nav .nav-item .nav-link.disbled:hover {
    color: rgba(255, 255, 255, 0.25);
}

.navbar.navbar-dark .navbar-toggler-icon {
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar.navbar-dark .breadcrumb .nav-item .nav-link,
.navbar.navbar-dark .navbar-nav .nav-item .nav-link {
    color: #fff;
    transition: 0.35s;
}

.navbar.navbar-dark .breadcrumb .nav-item .nav-link:hover,
.navbar.navbar-dark .navbar-nav .nav-item .nav-link:hover {
    color: rgba(255, 255, 255, 0.75);
}

.navbar.navbar-dark .breadcrumb .nav-item.active > .nav-link,
.navbar.navbar-dark .navbar-nav .nav-item.active > .nav-link {
    background-color: rgba(255, 255, 255, 0.1);
}

.navbar.navbar-dark .breadcrumb .nav-item.active > .nav-link:hover,
.navbar.navbar-dark .navbar-nav .nav-item.active > .nav-link:hover {
    color: #fff;
}

.navbar.navbar-dark .navbar-toggler {
    color: #fff;
}

/* Navbar responsive */
@media (width < 576px) {
    .navbar .dropdown-menu form {
        width: 17rem;
    }
}

@media (width >= 576px) {
    .navbar .dropdown-menu form {
        width: 22rem;
    }

    .navbar.scrolling-navbar {
        padding-top: 12px;
        padding-bottom: 12px;
        transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
    }

    .navbar.scrolling-navbar .navbar-nav > li {
        transition-duration: 1s;
    }

    .navbar.scrolling-navbar.top-nav-collapse {
        padding-top: 5px;
        padding-bottom: 5px;
    }
}

@media (width < 992px) {
    .navbar .container {
        width: 100%;
    }

    .navbar .container .navbar-toggler-right {
        right: 0;
    }

    .navbar .nav-item .nav-link {
        padding-right: 6px;
        padding-left: 6px;
        padding-top: 3px;
        padding-bottom: 3px;
    }
}

@media (1200px <= width < 1400px) {
    .navbar .nav-item .nav-link {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        font-size: 1.1rem;
    }
}

/* ==========================================================================
   10. ALMANAC
   ========================================================================== */

.almanac-container {
    display: flex;
    margin-left: auto;
}

.almanac-item {
    padding: 0.5rem 1rem;
    color: #fff;
    font-size: 1.1rem;
    white-space: nowrap;
}

.almanac-item .wi {
    margin-right: 0.25rem;
}

.almanac-dropdown-item {
    padding: 1rem;
    font-size: 1rem;
    white-space: nowrap;
    display: block;
    padding-top: 3px;
    padding-bottom: 3px;
}

.almanac-item i[data-bs-toggle="tooltip"]:hover {
    opacity: 0.8;
    cursor: help;
}

@media (width < 1400px) {
    .almanac-item {
        padding: 0.25rem 0.5rem;
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   11. TABLES
   ========================================================================== */

table th {
    font-size: 0.9rem;
    font-weight: 700;
}

table td {
    font-size: 0.9rem;
    font-weight: normal;
}

table.table thead th {
    border-top: none;
}

table.table th,
table.table td {
    padding-top: 1.1rem;
    padding-bottom: 1rem;
}

table.table a {
    margin: 0;
    color: #212529;
}

table.table .label-table {
    height: 0.94rem;
    padding: 0;
    margin: 0;
    line-height: 0.94rem;
}

table.table.btn-table td {
    vertical-align: middle;
}

table.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.075);
    transition: 0.5s;
}

table .th-lg {
    min-width: 9rem;
}

table .th-sm {
    min-width: 6rem;
}

table.table-sm th,
table.table-sm td {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.table-responsive > .table-bordered,
.table-responsive-sm > .table-bordered,
.table-responsive-md > .table-bordered,
.table-responsive-lg > .table-bordered,
.table-responsive-xl > .table-bordered {
    border-top: 1px solid #dee2e6;
}

/* ==========================================================================
   12. FOOTER & LIST GROUPS
   ========================================================================== */

footer.page-footer {
    margin-top: auto;
    bottom: 0;
    color: #fff;
    flex-shrink: 0;
}

footer.page-footer .container-fluid {
    width: auto;
}

footer.page-footer .footer-copyright {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.6);
    background-color: rgba(0, 0, 0, 0.2);
}

footer.page-footer a {
    color: #fff;
}

.list-group .list-group-item:first-child {
    border-top-left-radius: 0.125rem;
    border-top-right-radius: 0.125rem;
}

.list-group .list-group-item:last-child {
    border-bottom-right-radius: 0.125rem;
    border-bottom-left-radius: 0.125rem;
}

.list-group a,
.list-group button {
    transition: 0.5s;
}

.list-group a:hover,
.list-group button:hover {
    transition: 0.5s;
}

/* ==========================================================================
   13. STATUS INDICATOR
   ========================================================================== */

.status-dot {
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
    background-color: #9E9E9E;
    display: inline-block;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    position: relative;
    transition: background-color 0.5s ease;
}

.status-dot::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #9E9E9E;
    animation: none;
    transition: background-color 0.5s ease;
}

.status-dot.green {
    background-color: #4CAF50 !important;
}

.status-dot.green::after {
    background-color: #4CAF50;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.status-dot.orange {
    background-color: #ffb619 !important;
}

.status-dot.orange::after {
    background-color: #ffb619;
    animation: none !important;
}

.status-dot.red {
    background-color: red !important;
}

.status-dot.red::after {
    background-color: red;
    animation: none !important;
}

/* ==========================================================================
   14. WEBCAM
   ========================================================================== */

.webcam-container {
    position: relative;
    max-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    overflow: hidden;
}

.webcam-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-height: 500px;
    cursor: pointer;
}

#webcamModal .modal-body {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
}

#webcamModal .text-center {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.webcam-modal-img {
    width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: pointer;
}

.webcam-modal-controls {
    flex-shrink: 0;
    margin: 0.5rem 0.25rem;
}

.webcam-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 1;
    opacity: 0.9;
}

.webcam-modal-close:hover {
    opacity: 1;
}

.webcam-modal-controls .weather-btn {
    color: #e8e8e8;
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.webcam-modal-controls .weather-btn:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.2);
}

.webcam-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 1rem;
}

.webcam-controls .btn {
    padding: 0.25rem 0.5rem;
}

@media (width < 576px) {
    .webcam-controls .btn {
        padding: 0.2rem 0.4rem;
    }

    .webcam-controls .btn i {
        font-size: 0.8rem;
    }

    .webcam-controls {
        gap: 5px;
    }
}

#timeSlider {
    flex-grow: 1;
}

/* ==========================================================================
   15. WEATHER BUTTONS
   ========================================================================== */

.weather-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
    justify-content: flex-start;
    align-items: center;
}

.weather-btn {
    padding: 0.35rem 0.7rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.25rem;
    background-color: #f0f4f8;
    border: 1px solid #d0d7de;
    color: #212529;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    white-space: nowrap;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.weather-btn:hover {
    background-color: #e6ebf0;
    border-color: #bac3cd;
}

.weather-btn.active {
    background-color: #3f51b5;
    color: white;
    border-color: #3f51b5;
    box-shadow: 0 1px 3px rgba(63, 81, 181, 0.3);
}

.weather-btn-search {
    padding: 0.5rem 1.2rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 0.25rem;
    margin: 0.5rem;
    background-color: #3f51b5;
    color: white;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    white-space: nowrap;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: none;
}

.weather-btn-search:hover {
    background-color: #303f9f;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.weather-btn-search i {
    margin-right: 0.5rem;
}

.weather-btn-sm {
    padding: 0.25rem 0.6rem;
    font-size: 0.8125rem;
}

@media (width < 576px) {
    .weather-btn-group {
        gap: 0.3rem;
        justify-content: center;
    }

    .weather-btn {
        padding: 0.3rem 0.6rem;
        font-size: 0.8125rem;
    }

    .weather-btn-search {
        padding: 0.4rem 0.9rem;
        font-size: 0.9rem;
        margin: 0.3rem;
    }
}

/* ==========================================================================
   16. WIDE SCREEN LAYOUT (FHD+)
   ========================================================================== */

@media (width >= 1660px) {
    .temprow {
        display: flex;
        width: 50%;
        margin: 1rem 0 0 0 !important;
    }

    .graphrow {
        display: flex;
        width: 50%;
        margin: 1rem 0 0 0 !important;
    }

    .d-flex-xxl {
        display: flex !important;
    }

    .temprow .col-xl-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .rowdivider {
        display: none !important;
    }
}

/* ==========================================================================
   17. DARK THEME
   ========================================================================== */

/* Auto dark theme (system preference) */
@media (prefers-color-scheme: dark) {
    .auto-theme.main-bg {
        background: #2e2e2e !important;
    }

    .auto-theme .card,
    .auto-theme .dropdown-menu,
    .auto-theme .dropdown-menu a {
        background-color: #444 !important;
        color: #ddd !important;
    }

    .auto-theme .dropdown-menu .dropdown-item .almanac-dropdown-item {
        color: #ddd !important;
    }

    .auto-theme .text-muted {
        color: #aaa !important;
    }

    .auto-theme .text-dark, .auto-theme {
        color: #ccc !important;
    }

    .auto-theme .table {
        --bs-table-bg: #444;
        --bs-table-striped-bg: #363636;
        --bs-table-striped-color: #fff;
        --bs-table-active-bg: #3d3d3d;
        --bs-table-active-color: #fff;
        --bs-table-hover-bg: rgba(0, 0, 0, 0.15);
        --bs-table-hover-color: #fff;
        --bs-table-border-color: #242323;
        --bs-table-color: #fff;
    }

    .auto-theme .list-group-item {
        background-color: #444 !important;
        color: #ddd !important;
        border-color: #555 !important;
    }

    .auto-theme .list-group-item a {
        color: #90CAF9 !important;
    }

    .auto-theme .list-group-item a:hover {
        color: #42A5F5 !important;
        text-decoration: underline;
    }

    .auto-theme .weather-btn {
        background-color: #333333;
        border-color: #444444;
        color: #e0e0e0;
    }

    .auto-theme .weather-btn:hover {
        background-color: #3d3d3d;
        border-color: #505050;
    }

    .auto-theme .weather-btn.active {
        background-color: #3949ab;
        color: white;
        border-color: #3949ab;
    }

    .auto-theme .weather-btn-search {
        background-color: #3f51b5;
    }

    .auto-theme .weather-btn-search:hover {
        background-color: #303f9f;
    }

    .auto-theme .lo-text .stat-label {
        color: #64B5F6;
    }

    .auto-theme .hi-text .stat-label {
        color: #EF5350;
    }

    /* The site does not use Bootstrap's data-bs-theme, so the popover palette
       has to be set explicitly. Popovers render in body (container: 'body'),
       hence the theme class on <body> is the right hook. */
    .auto-theme .popover {
        --bs-popover-bg: #444;
        --bs-popover-header-bg: #3a3a3a;
        --bs-popover-header-color: #eee;
        --bs-popover-body-color: #ddd;
        --bs-popover-border-color: #555;
        --bs-popover-arrow-border: #555;
    }
}

/* Explicit dark theme class */
.dark-theme.main-bg {
    background: #2e2e2e !important;
}

.dark-theme .card,
.dark-theme .dropdown-menu,
.dark-theme .dropdown-menu a {
    background-color: #444 !important;
    color: #ddd !important;
}

.dark-theme .dropdown-menu .dropdown-item .almanac-dropdown-item {
    color: #ddd !important;
}

.dark-theme .text-muted {
    color: #aaa !important;
}

.dark-theme .text-dark, .dark-theme {
    color: #ccc !important;
}

.dark-theme .list-group-item {
    background-color: #444 !important;
    color: #ddd !important;
    border-color: #555 !important;
}

.dark-theme .list-group-item a {
    color: #90CAF9 !important;
}

.dark-theme .list-group-item a:hover {
    color: #42A5F5 !important;
    text-decoration: underline;
}

.dark-theme .weather-btn {
    background-color: #333333;
    border-color: #444444;
    color: #e0e0e0;
}

.dark-theme .weather-btn:hover {
    background-color: #3d3d3d;
    border-color: #505050;
}

.dark-theme .weather-btn.active {
    background-color: #3949ab;
    color: white;
    border-color: #3949ab;
}

.dark-theme .weather-btn-search {
    background-color: #3f51b5;
}

.dark-theme .weather-btn-search:hover {
    background-color: #303f9f;
}

.dark-theme .lo-text .stat-label {
    color: #64B5F6;
}

.dark-theme .hi-text .stat-label {
    color: #EF5350;
}

.dark-theme .popover {
    --bs-popover-bg: #444;
    --bs-popover-header-bg: #3a3a3a;
    --bs-popover-header-color: #eee;
    --bs-popover-body-color: #ddd;
    --bs-popover-border-color: #555;
    --bs-popover-arrow-border: #555;
}

/* The wind barbs are stroked in a grey chosen against a white chart; on the
   dark chart background that same grey nearly disappears. Highcharts writes
   the colour as a presentation attribute, which a stylesheet outranks.
   The barbs are drawn as .highcharts-point, and the dark theme zeroes that
   class's stroke-width - which erases a shape that is nothing but stroke, so
   the width has to be restated here where the selector outranks it. */
.dark .highcharts-windbarb-series path {
    stroke: #b0b4ba;
    stroke-width: 2;
}