/* Luistervink CSS - Custom styling for the project */

/* Base styling */
:root {
    --primary-color: #84ED7D;
    --secondary-color: #FF6DC3;
    /* Text on brand-pink: the public site uses the brand pink itself, as
       intended by the design. A darker pink (#B9006D) was tried for WCAG AA
       contrast (6.4:1 on white vs 2.55:1 for the brand pink) but changed the
       look of the site, so this alias points back at the brand pink. Set it to
       #B9006D again to trade the tone for contrast. */
    --secondary-text-color: var(--secondary-color);
    --yellow-color: #FFF568;
    --blue-color: #76BFE9;
    --light-bg: #f5f8f5;
    --dark-text: #FF6DC3;
    --earth-text: #61433a;
    --light-text: #ffffff;
    --hover-color: #e8f4e8;
    --border-color: #dddddd;
    --header-font: 'Londrina Solid', sans-serif;
    --body-font: 'Londrina Solid', sans-serif;
}

.earth-text-color {
    color: var(--earth-text) !important;
}

body {
    font-family: var(--body-font);
    color: var(--earth-text);
    line-height: 1.6;
    font-size: 1.4rem;
}

/* Logo container styles */
.logo-container {
    display: flex;
    align-items: center;
    margin-right: 20px;
    margin-left: -15px;
}

.navbar-container {
    display: flex;
    align-items: center;
    width: 100%;
}

.luistervink-logo-img {
    height: 60px;
    width: auto;
}

.luistervink-text-logo-img {
    height: 50px;
    width: auto;
    min-width: 100px;
}

/* Z-index hierarchy */
.navbar,
.navbar-collapse,
.dropdown-menu,
#navbarContent,
.nav-item.dropdown,
.dropdown-toggle,
#locationsDropdown {
    z-index: 2000 !important;
}

.table-bg-container,
.location-card,
.location-card-header,
.location-title-container,
.location-tabs-container {
    z-index: 40;
}

.app-content-nav {
    position: relative;
    /* Well above table contents (e.g. species thumbnails / filter sidebar
       sit at z-index ~100) so dropdown submenus like the Games dropdown
       render in front of them on tabs like /all/. The nav's stacking
       context would otherwise trap its dropdown-menu children. Still
       below the main .navbar (z-index 2000). */
    z-index: 1000;
    width: 100%;
    margin-bottom: 0;
}

.centered-text {
    text-align: center;
    font-size: 4em;
    color: var(--secondary-text-color);
}

/* Tab content styling */
#tab_content,
.tab-content,
[id$="-tab-content"],
div:has(> table) {
    margin-top: -2px;
    position: relative;
    z-index: 5;
    border-top: 2px solid var(--light-text);
}

.app-content-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    margin-bottom: 30px;
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 15px;
}

table.table thead tr th:first-child {
    border-top-left-radius: 0;
}

.card {
    margin-top: 0;
    box-shadow: none;
}

.blog-post-card .card-body {
    background-color: rgba(255, 255, 255, 0.85);
}

table.table tr {
    box-shadow: none;
}

.table-bg-container {
    box-shadow: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.table-bg-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.1;
}

/* Dropdown styling */
.dropdown-search {
    padding: 0.5rem 1rem;
    width: 100%;
}

.dropdown-menu {
    min-width: 250px;
}

.dropdown-divider {
    margin: 0.5rem 0;
}

.dropdown-form {
    padding: 0.5rem 1rem;
}

.dropdown-form .input-group {
    width: 100%;
}

.dropdown-form .btn {
    display: flex;
    align-items: center;
}

/* Main navigation */
.main-nav {
    background-color: #f0f0f0;
    background-image: url('/static/media/Luistervink_BG_3.webp');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    position: relative;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border-color);
}

.main-nav::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary-color);
    opacity: 0.85;
    z-index: 0;
}

.main-nav .container,
.main-nav .navbar-container,
.main-nav .nav,
.main-nav .nav-link,
.main-nav .logo-container,
.main-nav .navbar-toggler {
    position: relative;
    z-index: 1;
}

.main-nav .nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    width: 100%;
}

.main-nav .nav-item {
    margin: 0;
}

.main-nav .nav-link {
    display: block;
    padding: 12px 18px;
    color: var(--dark-text);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
    font-family: 'Londrina Solid', sans-serif;
    font-size: 1.6rem;
}

.main-nav .nav-link:hover,
.main-nav .nav-link:focus {
    color: var(--secondary-text-color);
    opacity: 0.8;
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom: 3px solid var(--secondary-color);
}

.main-nav .nav-link.active {
    border-bottom: 3px solid var(--dark-text);
    font-weight: 600;
}

.main-nav .home-icon,
.main-nav .dropdown-icon {
    margin-right: 6px;
}

.main-nav .dropdown-menu {
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 8px 0;
}

.main-nav .dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 16px;
    clear: both;
    color: var(--dark-text);
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    font-family: 'Londrina Solid', sans-serif;
    font-size: 1.3rem;
}

.main-nav .dropdown-item:hover,
.main-nav .dropdown-item:focus {
    background-color: var(--hover-color);
    color: var(--primary-color);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: var(--light-text);
}

/* Content area */
.app-content-wrapper {
    padding-top: 5px !important;
    margin-top: 0 !important;
    min-height: calc(100vh - 250px);
}

/* Pages that set no {% block title %} render this heading empty; an empty <h1>
   is an accessibility failure, so take it out of the document altogether. */
.app-content-title:empty { display: none; }

.app-content-title {
    font-family: var(--header-font);
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.2 !important;
    text-align: center;
    color: var(--secondary-text-color);
    font-size: 2.5rem;
    position: relative;
    width: 100%;
}

.app-content-title::after {
    content: "";
    display: block;
    width: 100px;
    height: 3px;
    background-color: var(--primary-color);
    margin: 0.5rem auto 0;
}

/* Footer styling - app-footer-wrapper (legacy) */
.app-footer-wrapper {
    background-color: #f0f0f0;
    background-image: url('/static/media/Luistervink_BG_3.webp');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    position: relative;
    padding: 30px 0;
    color: var(--dark-text);
    border-top: 1px solid var(--border-color);
}

.app-footer-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary-color);
    opacity: 0.85;
    z-index: 0;
}

.app-footer-wrapper .container,
.app-footer-wrapper .row,
.app-footer-wrapper .col-md-4 {
    position: relative;
    z-index: 1;
}

.app-footer-wrapper h5 {
    font-family: var(--header-font);
    color: var(--dark-text);
    font-size: 22px;
    margin-bottom: 15px;
}

.app-footer-wrapper a {
    color: var(--dark-text);
    text-decoration: none;
}

.app-footer-wrapper a:hover {
    color: var(--hover-color);
    text-decoration: underline;
}

/* Table styling */
table.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 20px;
    border-color: var(--secondary-color);
}

table.table thead th {
    background-color: var(--primary-color);
    color: var(--light-text);
    padding: 10px;
    font-weight: bold;
    border-bottom: none;
    text-align: left;
}

.table thead th.asc a,
.table thead th.desc a,
.table thead th a:hover,
.table thead th a:focus,
.table thead th.asc,
.table thead th.desc {
    color: var(--hover-color) !important;
}

table.table tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

table.table tbody tr:hover {
    background-color: var(--hover-color);
}

table.table td {
    padding: 8px 10px;
    border-top: 1px solid var(--border-color);
    vertical-align: middle;
    color: var(--dark-text);
}

.table-container {
    width: 100%;
    overflow-x: auto;
}

.table-container table {
    margin-bottom: 0;
}

/* Pagination styling */
.pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: 4px;
    justify-content: center;
    margin: 20px 0 0;
}

.pagination > li > a,
.pagination > li > span {
    position: relative;
    padding: 6px 12px;
    margin-left: -1px;
    color: var(--primary-color);
    text-decoration: none;
    background-color: #fff;
    border: 1px solid var(--border-color);
}

.pagination > .active > a,
.pagination > .active > span {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.pagination > li > a:hover {
    color: var(--primary-color);
    background-color: var(--hover-color);
}

/* Tab navigation styling */
.nav-tabs {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
}

.nav-tabs > li > a {
    margin-right: 2px;
    border-radius: 4px 4px 0 0;
    color: var(--dark-text);
    padding: 10px 15px;
    font-weight: 500;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--primary-color);
    font-weight: bold;
    border: 1px solid var(--border-color);
    border-bottom-color: transparent;
}

.nav-tabs > li > a:hover {
    background-color: #f5f5f5;
    border-color: #eeeeee #eeeeee var(--border-color);
}

/* Filter form styling */
.app-filter-form-wrapper {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

.app-filter-form-wrapper .form-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.app-filter-form-wrapper .form-group {
    margin-right: 15px;
    margin-bottom: 10px;
}

.app-filter-form-wrapper label {
    margin-right: 5px;
    font-weight: 600;
    color: var(--dark-text);
}

.app-filter-form-wrapper .form-control {
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

.app-filter-form-wrapper .btn-default {
    background-color: var(--primary-color);
    color: white;
    border: none;
}

.app-filter-form-wrapper .btn-link {
    color: var(--primary-color);
}

/* List styling */
ul {
    padding-left: 18px;
}

ul li {
    margin-bottom: 8px;
    color: var(--dark-text);
}

ul li a {
    color: var(--dark-text);
    text-decoration: none;
}

ul li a:hover {
    text-decoration: underline;
    color: var(--primary-color);
}

/* Bootstrap overrides */
.btn-default {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--light-text);
}

.btn-default:hover {
    background-color: #005E54;
    border-color: #005E54;
    color: var(--light-text);
}

.form {
    margin-bottom: 20px;
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(0, 120, 106, 0.25);
}

h1, h2, h3, h4, h5, h6, label, th, td, li, .form-control {
    color: var(--dark-text);
}

.btn {
    font-weight: bold;
}

a {
    color: var(--dark-text);
    font-weight: 500;
}

a:hover {
    color: var(--primary-color);
}

/* Button styling */
.btn-round {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FF6DC3;
    color: white;
    cursor: pointer;
    font-size: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    outline: none;
    transition: background-color 0.3s ease;
}

.btn-round:hover {
    background-color: #0056b3;
}

.btn-round:focus {
    outline: none;
}

.form-group select,
.form-group input[type="text"] {
    width: 100%;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ced4da;
}

.form-group select {
    height: calc(1.5em + .75rem + 2px);
}

.search-btn {
    background-color: #FF6DC3;
    border-color: #FF6DC3;
    color: white;
}

.search-btn:hover {
    background-color: #ff4db8;
    border-color: #ff4db8;
    color: white;
}

.search-btn:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 109, 195, 0.25);
}

.title-image {
    height: 90px;
    width: auto;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}

.table-image {
    max-height: 70px;
    width: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Guide-species / stepping-stone marker on location live/day/month/total/kiosk
   tables: a pink province-marker sticker with a "guide species" / "stepping
   stone" label, placed right after the species name. */
.species-name-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.species-role-sticker {
    position: relative;
    display: inline-block;
    width: 58px;
    height: 58px;
    flex: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.22));
}
.species-role-sticker img {
    width: 100%;
    height: 100%;
    display: block;
}
.species-role-sticker__label {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0 7px;
    transform: rotate(-8deg);
    font-family: var(--header-font);
    font-weight: 800;
    font-size: 0.62rem;
    line-height: 1;
    text-align: center;
    color: #fff;
    text-transform: lowercase;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.btn-pink {
    background-color: #FF6DC3;
    color: white;
    border-color: #FF6DC3;
}

.btn-pink:hover,
.btn-pink:focus,
.btn-pink:active {
    background-color: #ff4db8;
    border-color: #ff4db8;
    color: white;
}

/* Filter sidebar */
.filter-sidebar {
    top: 1rem;
    z-index: 100;
    border-radius: 8px !important;
    border: 1px solid rgba(0, 0, 0, 0.125) !important;
    border-top: 4px solid var(--secondary-color) !important;
    overflow: hidden;
}

.filter-sidebar .card-body {
    padding: 1.25rem;
}

/* Rounded table card in filter layout */
.app-content-section .position-relative .card {
    border-radius: 8px;
    overflow: hidden;
    border-top: 1px solid rgba(0, 0, 0, 0.125) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
}

.no-sounds-card {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    outline: none !important;
}

.no-sounds-card .card-body {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding-left: 0;
    padding-right: 0;
}

.species-sounds-image {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
}

.species-sounds-scientific {
    font-size: 0.72em;
    margin-left: 0.25rem;
}

tr.clickable-row {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

tr.clickable-row:hover {
    background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.08);
}

.location-species-sounds-page .sound-share-polaroid {
    width: 100%;
    display: block;
    border-radius: 8px;
}

.location-species-sounds-page {
    max-width: 100%;
    overflow-x: hidden;
}

.location-species-sounds-page .card {
    border: none !important;
    box-shadow: none !important;
    background: #fff !important;
}

.location-species-sounds-page .row {
    margin-left: 0;
    margin-right: 0;
}

.location-species-sounds-page [class*="col-"] {
    min-width: 0;
}

.location-species-sounds-page .table-container {
    border: none !important;
    box-shadow: none !important;
    background: #fff !important;
    outline: none !important;
}

.location-species-sounds-page table.table {
    background: #fff !important;
    border: none !important;
    box-shadow: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-color: transparent !important;
    --bs-table-border-color: var(--border-color) !important;
}

.location-species-sounds-page table.table th,
.location-species-sounds-page table.table td {
    border-left: none !important;
    border-right: none !important;
    background: #fff !important;
}

.location-species-sounds-page .btn-outline-secondary,
.location-species-sounds-page .spectrogram-player .ctrl-btn {
    color: #fff !important;
    background-color: var(--secondary-text-color) !important;
    border-color: var(--secondary-text-color) !important;
}

.location-species-sounds-page .btn-outline-secondary:hover,
.location-species-sounds-page .btn-outline-secondary:focus,
.location-species-sounds-page .btn-outline-secondary:active,
.location-species-sounds-page .spectrogram-player .ctrl-btn:hover,
.location-species-sounds-page .spectrogram-player .ctrl-btn:focus,
.location-species-sounds-page .spectrogram-player .ctrl-btn:active {
    color: #fff !important;
    background-color: #ff4db8 !important;
    border-color: #ff4db8 !important;
}

.location-species-sounds-page table.table tbody tr:last-child td {
    border-bottom: none !important;
}

.location-species-sounds-page table.table tbody tr td {
    vertical-align: middle;
}

.location-species-sounds-page .table > :not(caption) > * > * {
    border-left: none !important;
    border-right: none !important;
    border-color: var(--border-color) !important;
}

.location-species-sounds-page .table-responsive {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Force flat, borderless table shell for the location species sounds page */
.location-species-sounds-page .app-content-section,
.location-species-sounds-page .position-relative .card,
.location-species-sounds-page .app-content-section .position-relative .card,
.location-species-sounds-page .app-content-section .table-container,
.location-species-sounds-page .app-content-section .table-responsive,
.location-species-sounds-page .app-content-section table.table {
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.spectrogram-player {
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    padding: 10px 12px;
}

.spectrogram-player .spectrogram-wrap {
    position: relative;
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
    background: #1a1a2e;
}

#ls-spectrogram {
    display: block;
    width: 100%;
    height: 140px;
}

#ls-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255, 255, 255, 0.85);
    pointer-events: none;
    display: none;
}

.spectrogram-player .player-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.spectrogram-player .ctrl-btn {
    background: none;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 13px;
    cursor: pointer;
    color: #444;
}

.filter-sidebar label {
    font-weight: 500;
    margin-bottom: 0.3rem;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #00665A;
    border-color: #00665A;
    color: white;
}

/* Bird map styling */
.row:has(> .centered-header) {
    margin-bottom: 0;
}

.centered-header {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.map-instruction-text {
    font-size: 1.1rem;
    color: var(--dark-text);
    margin-bottom: 1rem;
    font-weight: 500;
    white-space: nowrap;
}

.home-search-container {
    max-width: 100%;
}

.home-search-container input {
    border-radius: 1rem;
    border: 1px solid var(--border-color);
    padding: 0.5rem 1rem;
}

.home-search-container input:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 0.2rem rgba(255, 109, 195, 0.25);
}

#map-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    overflow: visible;
}

#region-map-container {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    overflow: visible;
}

#bird-map {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease;
}

.map-overlay-text {
    position: absolute;
    bottom: 3%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 110;
    width: 100%;
    white-space: nowrap;
    overflow: visible;
}

.map-overlay-text p {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.7);
    padding: .5rem;
    border-radius: 5px;
    font-size: 2.5rem;
    color: var(--secondary-text-color);
    font-weight: bold;
    margin: 0;
    max-width: none;
    width: auto;
}

/* Review a Bird button on homepage map */
.review-bird-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 100;
    display: inline-block;
    text-decoration: none;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.25));
    transition: transform 0.2s, filter 0.2s;
}
.review-bird-btn:hover {
    transform: scale(1.12) rotate(3deg);
    filter: drop-shadow(0 5px 14px rgba(0,0,0,0.35));
}
.event-promo-btn {
    top: 10px;
    left: 10px;
}
.review-bird-btn--shift {
    top: 160px;
    left: 10px;
}
.review-bird-img {
    width: 130px;
    height: auto;
    display: block;
}

/* Guide-group splash button on the location pages — the homepage
   "Review a Bird" look, floating over the card's top-right corner. */
.guide-group-btn {
    left: auto;
    right: -12px;
    top: -16px;
}

.guide-group-btn + .guide-group-btn { top: 130px; }

@media (max-width: 767px) {
    .guide-group-btn { right: -4px; top: -12px; }
    .guide-group-btn .review-bird-img { width: 96px; }
}

.review-bird-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-12deg);
    font-size: 0.9rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    line-height: 1.3;
    pointer-events: none;
}

.text-under-map {
    margin-bottom: 1rem;
    margin-top: -2rem;
    padding: .5rem;
    text-align: center;
    position: relative;
    z-index: 5;
    font-size: 1.8rem;
    color: var(--secondary-text-color);
}

/* The -2rem above tucks the tagline under the map image. On the mobile home
   page the tagline follows the *search field* instead, where that pull put it
   on top of the input: with z-index 5 it covered the lower half and swallowed
   every tap in the middle of the field. */
.text-under-map--below-search {
    margin-top: 0;
}

/* Locations that a search reveals inside a region, indented under it. */
.division-region-children {
    margin-left: 1.25rem;
}

.map-marker img,
.region-marker img:not(.region-thumbnail) {
    width: 16px;
    height: auto;
}

.map-marker:hover {
    cursor: pointer;
}

.location-name-tag {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.7);
    color: var(--secondary-text-color);
    padding: 2px 8px;
    border-radius: 3px;
    white-space: nowrap;
    font-size: 1.1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
    z-index: 10;
}

@media (hover: none) {
    .location-name-tag {
        opacity: 1 !important;
    }
}

.region-name {
    position: absolute;
    display: block;
    white-space: nowrap;
    text-align: center;
    font-family: 'Londrina Solid', sans-serif;
    font-size: 32px;
    font-weight: 400;
    color: var(--dark-text);
    left: 24px;
    top: -24px;
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8);
}

/* Hide location names by default on region detail map, show on hover */
.region-location-marker .region-name {
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.region-location-marker:hover .region-name {
    opacity: 1;
    pointer-events: auto;
}

.region-thumbnail {
    width: 60px;
    height: auto;
    max-width: 40px;
    border: 3px solid var(--secondary-color);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    object-fit: cover;
    background-color: var(--secondary-color);
    transition: transform 0.3s ease;
    cursor: pointer;
}

.region-thumbnail:hover {
    transform: scale(1.15);
}

.region-thumbnail-small {
    width: 20px;
    height: 20px;
    border: 2px solid var(--secondary-color);
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--secondary-color);
    vertical-align: middle;
}

.row.d-none.d-md-block {
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.decoration-left img {
    max-width: 100px;
    height: auto;
}

.decoration-left {
    position: absolute;
    left: +50px;
    top: 30%;
    z-index: 50;
    max-width: 250px;
}

.mirrored-image {
    transform: scaleX(-1);
}

/* Map markers */
.map-marker,
.region-marker,
.region-location-marker {
    position: absolute;
    transform: translate(-50%, -75%);
    z-index: 10;
    width: 24px;
    min-height: 24px;
}

.map-marker img {
    width: 24px;
    height: auto;
    display: block;
}

.region-location-marker img {
    width: 28px;
    height: auto;
}

.region-marker:hover .region-name,
.region-location-marker:hover .region-name,
.region-name:hover {
    font-weight: 900;
    transform: scale(1.15);
    transition: transform 0.3s ease;
    cursor: pointer;
}

.region-marker img:hover,
.region-location-marker img:hover {
    transform: scale(1.15);
    transition: transform 0.3s ease;
    cursor: pointer;
}

.region-location-marker.marker-highlight img {
    transform: scale(1.3);
    transition: transform 0.2s ease;
}

.region-location-marker.marker-highlight .region-name {
    opacity: 1;
    font-weight: 900;
}

/* Position text to the left of pin for markers on right side of map */
.region-location-marker.text-left .region-name {
    left: auto;
    right: 24px;
    text-align: right;
}

.map-title {
    margin-bottom: 15px;
}

.locations-table {
    width: 100%;
    margin-top: 10px;
}

.locations-table th,
.locations-table td {
    padding: 8px;
    border-bottom: 1px solid #ddd;
}

/* Location views styling */
.live-view-content,
.col-md-8 .table-with-filter-form {
    text-align: center;
    font-size: 1.2rem;
}

.live-view-content table,
.table-with-filter-form table {
    margin: 0 auto;
    width: 100%;
}

.live-view-content td,
.live-view-content th,
.table-with-filter-form td,
.table-with-filter-form th {
    font-size: 1.5rem;
}

.live-view-content td:has(span.number),
.live-view-content td.numeric,
.table-with-filter-form td:has(span.number),
.table-with-filter-form td.numeric {
    font-size: 1.6rem;
    font-weight: 600;
}

/* Location title styling */
.location-title-container {
    margin-bottom: -20px;
    width: 100%;
}

.location-title-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

.location-title {
    font-size: 4.5rem;
    font-weight: bold;
    color: var(--secondary-text-color);
    margin: 0;
    text-align: center;
    font-family: var(--header-font);
    display: inline-block;
}

.location-content-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 10px;
}

.location-table-container {
    width: 100%;
    font-size: 1.2rem;
    overflow-x: auto;
}

.location-table-container table {
    width: 100%;
    margin-bottom: 1rem;
}

.location-table-container td,
.location-table-container th {
    font-size: 1.3rem;
}

.location-table-container td:has(span.number),
.location-table-container td.numeric {
    font-size: 1.4rem;
    font-weight: 600;
}

/* Hide table headers in location tables */
.location-table-container thead {
    display: none;
}

/* Remove top border from location tables */
.location-table-container table {
    border-top: none;
}

.location-table-container table tbody tr:first-child td {
    border-top: none;
}

/* Location card styling */
.position-relative {
    position: relative;
}

.location-card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    overflow: hidden;
    border: none;
    margin-bottom: 30px;
}

.location-card-header {
    background-color: rgba(132, 237, 125, 0.4);
    border: 4px solid var(--secondary-color);
    border-bottom: none;
}

.location-tabs-container {
    width: 100%;
}

/* Location image */
.location-image-container {
    display: flex;
    align-items: center;
    height: 100%;
}

.location-image {
    height: 6rem;
    width: auto;
    object-fit: contain;
    vertical-align: middle;
}

.location-title-inline h1 {
    margin-bottom: 0;
}

.location-name {
    color: var(--secondary-text-color);
    font-weight: 500;
    display: inline-block;
}

.map-marker {
    padding: 10px;
}

/* Scientific name styling */
.scientific-name-container {
    margin-bottom: 1rem;
}

.scientific-name-label {
    margin-right: 0.5rem;
}

.scientific-name-value {
    font-weight: bold;
    margin-right: 0.5rem;
    color: var(--secondary-text-color);
}

/* Species info page */
.species-info-content {
    margin-bottom: 1.5rem;
}

.species-info-contribute {
    font-size: 0.75rem;
    color: #555;
    margin-bottom: 1.5rem;
}

.species-sounds-small {
    max-width: 300px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
}

.species-sounds-small .table {
    font-size: 0.9rem;
    margin-bottom: 0;
}

.species-sounds-small h5 {
    font-size: 1rem;
    color: var(--earth-text);
}

/* Sound card with spectrogram */
.sound-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    max-width: 600px;
}

.sound-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background-color: #f9f9f9;
}

.sound-type-label {
    font-size: 1rem;
    font-weight: 500;
    color: var(--earth-text);
}

.spectrogram-wrapper {
    position: relative;
    width: 100%;
    line-height: 0;
}

.spectrogram-canvas {
    width: 100%;
    height: 150px;
    display: block;
    background-color: #1a1a2e;
}

.spectrogram-playhead {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background-color: var(--primary-color);
    pointer-events: none;
    z-index: 2;
}

.kiosk-heading {
    padding-left: 50px;
    flex-grow: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobile map table styles */
.mobile-map-table-container {
    position: relative;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    padding: 15px;
    min-height: 500px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mobile-map-table-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 1;
}

.mobile-map-table {
    width: 100%;
    position: relative;
    z-index: 2;
    border-collapse: collapse;
    max-width: 85%;
    margin: 0 auto;
}

.mobile-map-table td {
    padding: 8px 10px;
    border: none;
    font-size: 1.5rem;
}

.mobile-map-table a {
    color: var(--secondary-text-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px 0;
    font-size: 1.4em;
    line-height: 1.2;
}

.mobile-map-table a:hover {
    opacity: 0.8;
}

.marker-container {
    display: inline-block;
    margin-right: 12px;
    width: 30px;
    height: 30px;
    vertical-align: middle;
}

.mobile-region-thumbnail {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.mobile-region-pin,
.mobile-location-pin {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.region-link {
    font-weight: 600;
}

.location-link {
    font-size: 1.25em;
}

.mobile-map-table tr:last-of-type.region-row + tr.location-row td {
    padding-top: 10px;
}

/* Audio button column */
@media screen and (min-width: 600px) {
    .table td:has(.play-button),
    .table th:has(.play-button) {
        width: 80px;
        max-width: 80px;
    }
}

.play-button {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===========================================
   STATISTICS KIOSK STYLES
   =========================================== */

body.kiosk-page {
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    margin: 0;
    padding: 0;
}

.kiosk-header {
    background: var(--primary-color);
    padding: 15px 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    position: relative;
}

.kiosk-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1800px;
    margin: 0 auto;
}

.kiosk-logo-section {
    display: flex;
    align-items: center;
    gap: 15px;
}

.kiosk-logo {
    height: 70px;
    width: auto;
}

.kiosk-text-logo {
    height: 55px;
    width: auto;
}

.kiosk-location-section {
    display: flex;
    align-items: center;
    gap: 20px;
}

.kiosk-location-section .location-image-container {
    display: flex;
    align-items: center;
}

.kiosk-location-section .location-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid var(--secondary-color);
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(255, 109, 195, 0.3);
    background: white;
}

.kiosk-location-title {
    font-family: var(--header-font);
    font-size: 4rem;
    color: var(--secondary-text-color);
    margin: 0;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
    font-weight: bold;
}

.kiosk-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    padding: 25px;
    max-width: 1800px;
    margin: 0 auto;
}

.kiosk-card {
    background: rgba(255, 255, 255, 0.97);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    border: 3px solid transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kiosk-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
}

.kiosk-card.live-section {
    border-color: var(--primary-color);
}

.kiosk-card.statistics-section {
    border-color: var(--secondary-color);
}

.kiosk-card-header {
    background: linear-gradient(135deg, #76BFE9 0%, var(--secondary-color) 100%);
    padding: 18px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.kiosk-card.live-section .kiosk-card-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, #76BFE9 100%);
}

.kiosk-card-icon {
    font-size: 2rem;
    line-height: 1;
}

.kiosk-card-icon-img {
    height: 2.5rem;
    width: auto;
    object-fit: contain;
}

.kiosk-card-title {
    font-family: var(--header-font);
    font-size: 2rem;
    color: white;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.kiosk-card.live-section .kiosk-card-title {
    color: var(--earth-text);
}

.kiosk-card-body {
    padding: 20px;
}

.kiosk-card .statistics-container {
    display: none;
}

.kiosk-card .statistics-container.active {
    display: block;
    animation: kioskFadeIn 0.6s ease-out;
}

@keyframes kioskFadeIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.kiosk-card .table {
    font-size: 1.3rem;
    margin-bottom: 0;
}

.kiosk-card .table thead {
    display: none;
}

.kiosk-card .table td {
    padding: 14px 18px;
    vertical-align: middle;
    border-color: rgba(0, 0, 0, 0.05);
}

.kiosk-card .table tbody tr {
    background: rgba(245, 249, 246, 0.5);
    transition: background-color 0.2s ease;
}

.kiosk-card .table tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.8);
}

.kiosk-card .table tbody tr:hover {
    background: rgba(132, 237, 125, 0.15);
}

.kiosk-card .table a {
    color: inherit;
    text-decoration: none;
    pointer-events: none;
}

/* Detection Overlay Animation */
.detection-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.88);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.detection-overlay.show {
    display: flex;
    animation: overlayFadeIn 0.5s ease-out;
}

@keyframes overlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.detection-announcement {
    text-align: center;
    padding: 50px;
    background: linear-gradient(180deg, #ffffff 0%, #fff5fa 100%);
    border-radius: 30px;
    box-shadow: 0 20px 60px rgba(255, 109, 195, 0.4);
    animation: slideUp 0.6s ease-out;
    max-width: 700px;
    width: 90%;
    border: 4px solid var(--secondary-color);
}

@keyframes slideUp {
    from {
        transform: translateY(100px) scale(0.9);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.detection-announcement .detection-polaroid-image {
    width: min(76vw, 430px);
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    object-position: center center;
    border-radius: 8px;
    margin-bottom: 24px;
    animation: birdPulse 2s ease-in-out infinite;
    background: #fff;
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.34),
        0 6px 16px rgba(255, 109, 195, 0.25);
    transform: rotate(-1.2deg);
}

@keyframes birdPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.detection-announcement h2 {
    font-family: var(--header-font);
    font-size: 3rem;
    color: var(--secondary-text-color);
    margin: 0 0 20px 0;
    font-weight: bold;
}

.detection-announcement p {
    font-size: 1.8rem;
    color: var(--earth-text);
    margin: 0;
    line-height: 1.5;
}

/* Prominent exclamation marks flagging a high-confidence (>70%) detection,
   shown around the confidence value in the event live table: three before and
   three after, cycling yellow / green / blue. */
.confidence-alert {
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    margin: 0 1px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.15);
}

.confidence-alert-yellow { color: #FFC107; }
.confidence-alert-green { color: #28A745; }
.confidence-alert-blue { color: #0D6EFD; }

/* Audio Enable Prompt */
.audio-enable-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audio-enable-card {
    background: linear-gradient(180deg, #ffffff 0%, #fff5fa 100%);
    padding: 50px;
    border-radius: 30px;
    text-align: center;
    max-width: 500px;
    border: 4px solid var(--secondary-color);
    box-shadow: 0 20px 60px rgba(255, 109, 195, 0.3);
}

.audio-enable-title {
    color: var(--secondary-text-color);
    font-size: 2.8rem;
    margin-bottom: 20px;
    font-family: var(--header-font);
}
.audio-enable-title .audio-enable-icon { width: 1em; height: 1em; vertical-align: -0.12em; margin-right: .3em; }

.audio-enable-text {
    color: var(--earth-text);
    font-size: 1.5rem;
    margin-bottom: 30px;
    line-height: 1.5;
}

.audio-enable-button {
    background: linear-gradient(135deg, var(--secondary-color) 0%, #ff8fd4 100%);
    color: white;
    border: none;
    padding: 20px 50px;
    font-size: 1.8rem;
    border-radius: 15px;
    cursor: pointer;
    font-family: var(--header-font);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 5px 20px rgba(255, 109, 195, 0.3);
}

.audio-enable-button:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(255, 109, 195, 0.5);
}

.audio-enable-exit {
    margin-top: 1.5rem;
    font-size: 1rem;
    color: var(--earth-light);
}

.audio-enable-exit a {
    color: var(--secondary-text-color);
    text-decoration: underline;
}

.audio-enable-exit a:hover {
    opacity: 0.8;
}

.kiosk-exit-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.2rem;
    transition: background 0.2s ease;
}

.kiosk-exit-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    color: white;
}

/* Footer styles */
.footer-wrapper {
    background-color: rgba(132, 237, 125, 0.85);
    margin-top: 4rem;
    padding-top: 1.5rem;
    border-top: 3px solid var(--secondary-color);
    font-size: 0.9rem;
}

/* Was an <h5>, which skipped h2–h4 after the page <h1>. Same look, correct level. */
.footer-wrapper .footer-col-title {
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--secondary-text-color);
    font-size: 1rem;
    border-bottom: 1px solid rgba(255, 109, 195, 0.3);
}

.footer-wrapper ul li {
    margin-bottom: 0.1rem;
    line-height: 1.4;
    color: var(--secondary-text-color);
}

.footer-wrapper a {
    color: var(--secondary-text-color);
    text-decoration: none;
    transition: opacity 0.2s;
}

.footer-wrapper a:hover {
    opacity: 0.7;
    text-decoration: underline;
}

.footer-language-form {
    margin-bottom: 0.75rem;
}

.footer-language-form select {
    padding: 0.25rem 0.5rem;
    border: 1px solid rgba(255, 109, 195, 0.3);
    border-radius: 0.25rem;
    margin-right: 0.5rem;
    font-size: 0.85rem;
    background-color: rgba(255, 255, 255, 0.5);
    color: var(--secondary-text-color);
}

.footer-language-form input[type="submit"] {
    padding: 0.25rem 0.75rem;
    background-color: var(--secondary-text-color);
    color: #ffffff;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: opacity 0.2s;
    font-size: 0.85rem;
}

.footer-language-form input[type="submit"]:hover {
    opacity: 0.8;
}

.footer-social {
    margin-top: 0.5rem;
}

.footer-social .social-link {
    font-size: 1.2rem;
    margin-left: 0.5rem;
    color: var(--earth-text);
}

.footer-social .social-link:hover {
    opacity: 0.7;
}

.footer-social strong {
    color: var(--secondary-text-color);
}

.footer-credit {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 109, 195, 0.3);
    text-align: center;
    color: var(--secondary-text-color);
    font-size: 0.85rem;
}

.footer-login-link {
    color: var(--secondary-text-color);
    opacity: 0.45;
    font-size: 0.8rem;
    text-decoration: none;
    transition: opacity 0.15s;
}
.footer-login-link:hover { opacity: 1; color: var(--secondary-text-color); }
button.footer-login-link { font-family: inherit; background: none; border: none; }

.navbar-user {
    display: flex;
    align-items: center;
}
.navbar-user-link {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--secondary-text-color);
    text-decoration: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.navbar-user-link {
    cursor: pointer;
    padding: 0.5rem 0;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
}
.navbar-user-link:hover,
.navbar-user-link:focus {
    color: var(--secondary-text-color);
    opacity: 0.8;
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom: 3px solid var(--secondary-color);
}

.footer-partners {
    font-size: 0.8rem;
}

/* About page styles */
.about-container {
    max-width: 800px;
    margin: 0 auto;
}

.about-content {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.about-content .markdown-content {
    color: var(--earth-text);
    line-height: 1.7;
}

.about-content .markdown-content h1,
.about-content .markdown-content h2,
.about-content .markdown-content h3 {
    color: var(--secondary-text-color);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.about-content .markdown-content p {
    margin-bottom: 1rem;
}

.about-content .markdown-content a {
    color: var(--secondary-text-color);
}

.about-content .markdown-content a:hover {
    opacity: 0.8;
}

.about-social {
    margin: 0;
    color: var(--earth-text);
}

.about-social .social-link {
    font-size: 1.4rem;
    margin-left: 0.5rem;
    color: var(--secondary-text-color);
}

.about-social .social-link:hover {
    opacity: 0.7;
}

/* ===========================================
   RESPONSIVE STYLES
   =========================================== */

@media (max-width: 1200px) {
    .kiosk-location-title {
        font-size: 3rem;
    }

    .kiosk-location-section .location-image {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 992px) {
    .kiosk-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
    .navbar-container {
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .logo-container {
        margin-left: 0;
    }

    .luistervink-logo-img {
        height: 50px;
        width: auto;
    }

    .luistervink-text-logo-img {
        height: 40px;
        min-width: 80px;
    }

    .navbar-toggler {
        padding: 0.25rem 0.5rem;
        font-size: 1rem;
        width: auto;
        display: block;
    }

    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: white;
        z-index: 9999 !important;
        padding: 1rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border-top: 1px solid #eaeaea;
    }

    .main-nav.navbar {
        position: relative;
        z-index: 9999 !important;
    }

    .navbar-collapse .dropdown-menu {
        z-index: 10000 !important;
    }

    .nav {
        flex-direction: column;
    }

    .nav-item {
        width: 100%;
        margin: 0.5rem 0;
    }

    .dropdown-menu {
        width: 100%;
        position: static !important;
        margin-top: 0.5rem;
        box-shadow: none;
        border: 1px solid #eee;
        transform: none !important;
    }

    .main-nav .nav {
        flex-direction: column;
        width: 100%;
    }

    .location-title {
        font-size: 4rem;
    }

    .title-image {
        height: 80px;
    }
}

@media (max-width: 860px) {
    .decoration-left {
        display: none;
    }
}

@media (max-width: 768px) {
    .kiosk-header-content {
        flex-direction: column;
        gap: 15px;
    }

    .kiosk-location-title {
        font-size: 2.5rem;
        text-align: center;
    }

    .kiosk-logo {
        height: 50px;
    }

    .kiosk-text-logo {
        height: 40px;
    }

    .kiosk-card-title {
        font-size: 1.5rem;
    }

    .kiosk-card .table {
        font-size: 1.1rem;
    }

    .detection-announcement img {
        width: 200px;
        height: 200px;
    }

    .detection-announcement h2 {
        font-size: 2rem;
    }

    .detection-announcement p {
        font-size: 1.4rem;
    }

    .kiosk-heading {
        display: none;
    }
}

@media (min-width: 768px) {
    .dropdown-menu {
        z-index: 3000 !important;
    }

    #locationsDropdown + .dropdown-menu {
        margin-top: 0 !important;
        border-radius: 0 0 8px 8px !important;
    }
}

@media (max-width: 767.98px) {
    .app-filter-form-wrapper .form-inline {
        flex-direction: column;
        align-items: stretch;
    }

    .app-filter-form-wrapper .form-group {
        margin-right: 0;
    }

    .app-filter-form-wrapper .form-control {
        width: 100%;
    }

    .col-md-6 {
        margin-bottom: 20px;
    }

    .main-nav .nav {
        flex-direction: column;
    }

    .main-nav .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        box-shadow: none;
        border: none;
        padding-left: 15px;
    }

    .filter-sidebar {
        position: static !important;
        width: 100%;
    }

    .luistervink-logo-img {
        height: 40px;
        width: auto;
    }

    .luistervink-text-logo-img {
        height: 30px;
        min-width: 70px;
    }

    .map-overlay-text p {
        font-size: 1rem;
        padding: 3px 10px;
    }

    .centered-text {
        font-size: 2em;
    }

    .table-bg-container img {
        opacity: 0.8;
    }

    .location-title-container {
        padding: 0 !important;
        margin: 0.5rem 0 !important;
    }

    .location-title-inline img,
    .location-icon {
        height: 40px !important;
        width: auto !important;
        max-width: 40px !important;
    }

    .location-card {
        padding: 0 !important;
        border-radius: 0;
        margin: 0;
    }

    .location-card-header {
        padding: 0 !important;
    }

    .location-title {
        font-size: 1.25rem !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .location-title-inline {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 5px 0 !important;
    }

    .navbar-collapse {
        position: absolute !important;
        top: 100% !important;
        background-color: white !important;
        width: 100% !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    }

    .location-card,
    .card-body,
    .location-table-container,
    .table-responsive,
    .app-content-section,
    .app-content-section .row,
    .app-content-section .col-md-9,
    .app-content-section .col-md-12 {
        padding: 0;
        margin: 0;
        width: 100%;
    }

    .card:not(.filter-sidebar) {
        border-radius: 0;
        margin: 0;
    }

    table.table {
        width: 100%;
        font-size: 16px;
    }

    .row,
    .col-12,
    .col-md-10,
    .col-lg-8 {
        padding: 0;
        margin: 0;
        max-width: 100%;
        width: 100%;
    }

    .location-title {
        font-size: 2.5rem;
        margin: 0.5rem 0;
    }

    .app-content-section .col-md-3 {
        margin-top: 1rem;
    }

    .filter-sidebar .card-body {
        padding: 1rem;
    }

    button[data-bs-toggle="collapse"] {
        text-align: center;
        background-color: var(--primary-color);
        color: var(--earth-text);
        border: none;
        border-radius: 4px;
        padding: 0.5rem;
        margin-bottom: 0.5rem;
        margin-right: 1rem;
    }

    .position-relative {
        margin: 0;
    }

    .position-relative .card {
        padding: 0;
    }

    table.table td,
    table.table th {
        padding: 0.5rem 0.5rem;
    }

    .region-name {
        font-size: 2em;
    }
}

@media (max-width: 575.98px) {
    .centered-text {
        font-size: 1.5em;
    }

    .centered-header {
        font-size: 1em;
    }

    .decoration-left img {
        width: 60px;
    }
}

@media (max-width: 400px) {
    .logo-container {
        flex: 1 1 auto;
        display: flex;
        margin-right: 5px;
        align-items: center;
    }

    .luistervink-logo,
    .luistervink-text-logo {
        display: block;
        width: auto;
        margin-right: 5px;
    }

    .luistervink-logo-img,
    .luistervink-text-logo-img {
        height: 30px;
        width: auto;
        display: block;
        max-width: none;
        min-width: 35px;
    }

    .navbar-toggler {
        width: auto;
        padding: 0.2rem 0.3rem;
        margin-left: 0;
        flex: 0 0 auto;
    }

    .navbar-container {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0;
    }

    .container {
        max-width: 100%;
        padding-left: 5px;
        padding-right: 5px;
    }

    .luistervink-logo,
    .luistervink-text-logo {
        display: block !important;
        visibility: visible !important;
    }
}

@media (max-width: 375px) {
    .mobile-map-table a {
        font-size: 1.2em;
    }

    .marker-container {
        width: 24px;
        height: 24px;
    }

    .mobile-region-thumbnail,
    .mobile-region-pin,
    .mobile-location-pin {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 360px) {
    .luistervink-text-logo {
        display: none;
    }
}

/* Homepage/sidebar location table next to map */
.col-md-4 > .location-table-container,
.col-lg-3 > .location-table-container {
    max-height: 500px;
    overflow-y: auto;
    padding: 0.5rem;
}

/* Card body content should not be height-constrained */
.card-body > .location-table-container {
    max-height: none;
    overflow-y: visible;
}

.location-table {
    width: 100%;
    border-collapse: collapse;
}

.location-table-row td {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.location-table-row td a {
    color: var(--dark-text);
    text-decoration: none;
    display: block;
    font-size: 1.1rem;
}

/* Larger font for region detail location table */
.region-location-table .location-table-row td a {
    font-size: 1.4rem;
}

.region-location-table .location-pin-small {
    width: 22px;
    height: 22px;
}

.location-table-row:hover td,
.location-table-row.row-highlight td {
    background-color: rgba(255, 109, 195, 0.15);
}

.location-table-row:hover td a,
.location-table-row.row-highlight td a {
    color: var(--secondary-text-color);
    font-weight: bold;
}

.location-table-row[data-type="region"] td a {
    font-family: 'Londrina Solid', sans-serif;
    font-size: 1.3rem;
}

/* Map marker highlight effect */
.map-marker.marker-highlight img,
.region-marker.marker-highlight img {
    transform: scale(1.5);
    transition: transform 0.2s ease;
}

.map-marker.marker-highlight .location-name-tag {
    opacity: 1 !important;
}

.region-marker.marker-highlight .region-thumbnail {
    transform: scale(1.3);
}

.region-name-tag {
    font-family: 'Londrina Solid', sans-serif;
    font-size: 1.2rem;
}

/* Division markers on map */
.division-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
    text-align: center;
    z-index: 5;
    padding: 12px;
    transition: opacity 0.3s ease;
}

.division-circle {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    margin: 0 auto;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.division-circle-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.division-count {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: bold;
    font-size: 1rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    z-index: 1;
}

.division-name-tag {
    position: absolute;
    top: calc(100% - 12px);  /* relative to padded marker; sits just below the circle */
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    color: var(--dark-text);
    background-color: rgba(255, 255, 255, 0.9);
    padding: 2px 6px;
    border-radius: 3px;
    margin-top: 4px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.division-marker:hover .division-name-tag,
.division-marker.marker-highlight .division-name-tag {
    opacity: 1;
}

.division-marker:hover .division-circle,
.division-marker.marker-highlight .division-circle {
    transform: scale(1.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Partner-map cluster markers: numbered circles (reusing the division-circle
   look) for locations that sit close together; clicking one fans the
   individual location pins out around it. */
.partner-cluster-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
    text-align: center;
    z-index: 5;
    padding: 8px;
    transition: opacity 0.2s ease;
}

.partner-cluster-marker:hover .division-circle,
.partner-cluster-marker.marker-highlight .division-circle {
    transform: scale(1.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* While its pins are fanned out, the circle stays as a dimmed "close" target. */
.partner-cluster-marker.cluster-expanded {
    opacity: 0.4;
}

.cluster-location-pin {
    animation: cluster-pin-pop 0.2s ease;
}

.cluster-location-pin .location-name-tag {
    font-size: 0.85rem;
}

@keyframes cluster-pin-pop {
    from {
        opacity: 0;
        transform: translate(-50%, -75%) scale(0.5);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -75%) scale(1);
    }
}

/* Division table styles */
.division-row {
    cursor: pointer;
}

.division-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.division-chevron {
    transition: transform 0.2s ease;
}

.division-locations-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem 0;
}

.division-region-link {
    color: var(--secondary-text-color);
    text-decoration: none;
    padding: 0.25rem 0;
    display: block;
    font-weight: 600;
}

.division-region-link:hover,
.division-region-link.link-highlight {
    color: var(--dark-text);
    background-color: rgba(255, 109, 195, 0.12);
    border-radius: 4px;
}

.division-region-link .badge,
.division-row .badge,
.division-region-link-mobile .badge {
    font-size: 0.7rem;
    vertical-align: middle;
    background-color: var(--secondary-text-color) !important;
}

.division-location-link {
    color: var(--dark-text);
    text-decoration: none;
    padding: 0.25rem 0;
    display: block;
}

.division-location-link:hover,
.division-location-link.link-highlight {
    color: var(--secondary-text-color);
    background-color: rgba(255, 109, 195, 0.12);
    border-radius: 4px;
}

.location-pin-small {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: middle;
}

.division-location-nested {
    padding-left: 1.5rem;
}

.division-location-nested-mobile {
    padding-left: 1.5rem;
}

/* Mobile division styles */
.division-circle-small {
    display: inline-flex;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--secondary-text-color);
    color: white;
    font-size: 1rem;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
}

.division-toggle-mobile {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.division-chevron-mobile {
    margin-left: 0.5rem;
    transition: transform 0.2s ease;
}

.division-locations-list-mobile {
    text-align: center;
    padding: 0.5rem 0;
}

.division-region-link-mobile {
    color: var(--secondary-text-color);
    text-decoration: none;
    font-weight: 600;
    display: block !important;
    text-align: center !important;
    font-size: 1.5rem !important;
    padding: 0.5rem 0;
}

.division-region-link-mobile:hover {
    color: var(--dark-text);
}

.division-location-link-mobile {
    color: var(--dark-text);
    text-decoration: none;
    display: block !important;
    text-align: center !important;
    font-size: 1.5rem !important;
    padding: 0.5rem 0;
}

.division-location-link-mobile:hover {
    color: var(--secondary-text-color);
}

/* Species list page */
.species-table-container {
    max-height: 500px;
    overflow-y: auto;
    padding: 0.25rem;
}

.species-columns {
    column-count: 2;
    column-gap: 0.5rem;
}

.species-column-item {
    display: block;
    padding: 0.15rem 0.4rem;
    color: var(--dark-text);
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1.3;
    break-inside: avoid;
    border-bottom: 1px solid #f0f0f0;
}

.species-column-item:hover {
    background-color: rgba(255, 109, 195, 0.15);
    color: var(--secondary-text-color);
    font-weight: bold;
}

/* ===========================================
   REVIEWS LIST PAGE
   =========================================== */

/* Reviews hero: carousel with info overlay */
.reviews-hero {
    position: relative;
    margin: 0 0 1.5rem;
    overflow: visible;
}

/* Reviews info section - positioned over carousel, left-aligned with main nav */
.reviews-info-section {
    position: absolute;
    top: -5px;
    left: 0;
    max-width: 320px;
    padding: 1rem 1.2rem;
    background: rgba(132, 237, 125, 0.85);
    border-radius: 0 0 12px 12px;
    z-index: 3;
    font-family: var(--body-font);
    color: var(--earth-text);
}

.reviews-info-section h1,
.reviews-info-section h2,
.reviews-info-section h3 {
    color: var(--secondary-text-color);
    font-family: var(--header-font);
}

.reviews-info-section p {
    color: var(--earth-text);
    line-height: 1.4;
    font-family: var(--body-font);
}

/* Carousel */
.reviews-carousel {
    position: relative;
    margin-bottom: 1.5rem;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.reviews-carousel-viewport {
    overflow: visible;
}

.reviews-carousel-track {
    display: flex;
    gap: 1rem;
    transition: transform 0.5s ease;
}

.reviews-carousel-slide {
    width: 60%;
    min-width: 0;
    flex-shrink: 0;
    display: flex;
    overflow: hidden;
    border: 2px solid var(--secondary-color);
    border-radius: 12px;
    background: var(--light-bg);
    opacity: 0.3;
    transform: scale(0.85);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.reviews-carousel-slide.active {
    opacity: 1;
    transform: scale(1);
}

.reviews-carousel-image {
    flex: 0 0 180px;
    min-height: 180px;
}

.reviews-carousel-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #fff;
}

.reviews-carousel-content {
    flex: 1;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.reviews-carousel-species {
    font-family: var(--header-font);
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.2rem;
    color: var(--secondary-text-color);
    text-decoration: none;
}

.reviews-carousel-species:hover {
    opacity: 0.8;
}

.reviews-carousel-stars {
    font-size: 1rem;
    color: var(--secondary-text-color);
    margin-bottom: 0.3rem;
}

.reviews-carousel-stars .far {
    color: rgba(255, 109, 195, 0.3);
}

.reviews-carousel-excerpt {
    margin: 0 0 0.3rem;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--earth-text);
}

.reviews-carousel-author {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--earth-text);
}

.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.85);
    color: var(--secondary-text-color);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: background 0.2s;
    z-index: 2;
}

.carousel-prev { left: 4px; }
.carousel-next { right: 4px; }

.carousel-prev:hover,
.carousel-next:hover {
    background: #fff;
}

.carousel-dots {
    text-align: center;
    padding: 0.5rem 0;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 109, 195, 0.3);
    cursor: pointer;
    transition: background 0.2s;
}

.carousel-dot.active {
    background: var(--secondary-color);
}

/* Search bar */
.reviews-search {
    max-width: 400px;
    margin: 0 auto 1.5rem;
}

.reviews-search input {
    border-radius: 1rem;
    border: 1px solid var(--border-color);
    padding: 0.5rem 1rem;
}

.reviews-search input:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 0.2rem rgba(255, 109, 195, 0.25);
}

/* Review list cards */
.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.reviews-list-card {
    display: flex;
    gap: 1rem;
    background: var(--light-bg);
    border: 2px solid var(--secondary-color);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.reviews-list-card:hover {
    box-shadow: 0 4px 12px rgba(255, 109, 195, 0.2);
}

.reviews-list-card-image {
    flex: 0 0 120px;
    min-height: 120px;
}

.reviews-list-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #fff;
}

.reviews-list-card-content {
    flex: 1;
    padding: 1rem;
}

.reviews-list-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.3rem;
}

.reviews-list-card-header a {
    font-family: var(--header-font);
    font-size: 1.4rem;
    color: var(--secondary-text-color);
    text-decoration: none;
}

.reviews-list-card-header a:hover {
    opacity: 0.8;
}

.reviews-list-date {
    font-size: 0.85rem;
    color: #999;
}

.reviews-list-species-rating {
    background: var(--light-bg);
    padding: 0.5rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    border: 1px solid rgba(255, 109, 195, 0.2);
}

.reviews-list-avg-stars {
    font-size: 1rem;
    color: var(--secondary-text-color);
    margin-bottom: 0.2rem;
}

.reviews-list-avg-stars .far {
    color: rgba(255, 109, 195, 0.3);
}

.reviews-list-avg-number {
    font-weight: bold;
    font-size: 0.95rem;
    margin-left: 0.3rem;
    color: var(--earth-text);
}

.reviews-list-tagline {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--earth-text);
    line-height: 1.3;
}

.reviews-list-stars {
    font-size: 1.1rem;
    color: var(--secondary-text-color);
    margin-bottom: 0.4rem;
}

.reviews-list-stars .far {
    color: rgba(255, 109, 195, 0.3);
}

.reviews-list-text {
    margin: 0 0 0.3rem;
    line-height: 1.5;
}

.reviews-list-author {
    font-weight: bold;
    font-size: 0.95rem;
    color: var(--earth-text);
}

.reviews-list-card-empty {
    border-style: dashed;
}

.reviews-list-empty-msg {
    font-style: italic;
    color: #999;
    font-size: 0.95rem;
}

/* Responsive */
@media (max-width: 767.98px) {
    .reviews-carousel-slide {
        flex-direction: column;
    }

    .reviews-carousel-image {
        flex: none;
        height: 140px;
    }

    .reviews-carousel-species {
        font-size: 1.2rem;
    }

    .reviews-carousel-excerpt {
        display: none;
    }

    .reviews-info-section {
        position: static;
        max-width: none;
        margin-bottom: 1rem;
        border-radius: 12px;
    }

    .reviews-list-card {
        flex-direction: column;
    }

    .reviews-list-card-image {
        flex: none;
        height: 160px;
    }

    .reviews-search {
        max-width: 100%;
    }
}

/* Final high-priority override: borderless white table shell on location species sounds page */
.location-species-sounds-page .app-content-section,
.location-species-sounds-page .position-relative,
.location-species-sounds-page .position-relative .card,
.location-species-sounds-page .card-body,
.location-species-sounds-page .table-container,
.location-species-sounds-page .table-responsive,
.location-species-sounds-page table.table {
    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    background: #fff !important;
}

/* Info panel */
.info-panel {
    background: #FFF568 !important;
    border: none !important;
    border-top: none !important;
    border-radius: 0.75rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.info-panel .card-body {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Bat playback controls. Hidden by default; players show this only when
   the loaded sound is a bat species or has a sample rate >50 kHz.
   Visually separated from the main player-controls row above by a faint
   divider + extra padding so the bat-specific knobs read as their own
   sub-band of controls. */
.bat-mode-controls {
    display: none;
    align-items: center;
    gap: 14px;
    row-gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    font-size: 0.875em;
}
.bat-mode-controls.is-visible { display: flex; }
.bat-mode-controls .bat-mode-label {
    color: var(--mg-muted, #5A645C);
    font-weight: 500;
    font-size: 0.875em;
    letter-spacing: 0.02em;
}
.bat-mode-controls select.bat-mode-select {
    width: auto;
    min-width: 130px;
    padding: 2px 6px;
    font-size: 12px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #fff;
}
/* The param-group is the slider sub-cluster (factor / mix frequency). Wrap
   it in a subtle pill so the slider + its label feel like a single unit
   and don't merge visually with the surrounding mode-select / toggles. */
.bat-mode-controls .bat-param-group {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.035);
}
.bat-mode-controls .bat-param-group.is-visible { display: flex; }
.bat-mode-controls .bat-param-group input[type="range"] {
    width: 120px;
    accent-color: var(--mg-accent, #1A5F2B);
}
.bat-mode-controls .bat-param-value {
    min-width: 52px;
    font-variant-numeric: tabular-nums;
    color: var(--mg-text, #2a2f2c);
    font-weight: 500;
}
.bat-mode-controls .bat-het-auto-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 0.875em;
    color: var(--mg-muted, #5A645C);
    font-weight: 400;
    cursor: pointer;
    white-space: nowrap;
}
.bat-mode-controls .bat-het-auto-toggle input { margin: 0; cursor: pointer; }
.bat-mode-controls input[type="range"]:disabled { opacity: 0.55; cursor: not-allowed; }
@media (max-width: 575.98px) {
    .bat-mode-controls { gap: 10px; row-gap: 6px; }
    .bat-mode-controls .bat-param-group input[type="range"] { width: 100px; }
}
/* Standalone "×" marker next to the TE factor slider. The body font
   (Londrina Solid) doesn't ship a glyph for U+00D7, so a plain `×` rendered
   in the inherited font shows up as a missing-glyph box. Force a system
   sans-serif here so the multiplication sign actually renders. */
.bat-mode-controls .bat-te-marker {
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--mg-text, #2a2f2c);
    line-height: 1;
}

/* --- Home live species panel --- */
.home-live-species {
    position: sticky;
    top: 16px;
}

.home-live-species-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    margin-bottom: 8px;
}

.home-live-species-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 0 0 rgba(132, 237, 125, 0.7);
    animation: live-dot-pulse 1.6s infinite;
}

@keyframes live-dot-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(132, 237, 125, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(132, 237, 125, 0);    }
    100% { box-shadow: 0 0 0 0   rgba(132, 237, 125, 0);    }
}

.home-live-species-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 70vh;
    overflow-y: auto;
}

.home-live-species-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.home-live-species-row:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--primary-color);
}

.home-live-species-row--new {
    animation: live-row-flash 4s ease-out 1;
}

@keyframes live-row-flash {
    0%   { background: var(--primary-color); }
    100% { background: rgba(255, 255, 255, 0.6); }
}

.home-live-species-thumb {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.home-live-species-meta {
    min-width: 0;
    flex: 1;
}

.home-live-species-name {
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-live-species-loc {
    font-size: 0.75rem;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-live-species-new-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 5px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    background: #e74c3c;
    border-radius: 3px;
    vertical-align: middle;
}

/* Pulsing ring on the map marker of the latest heard detection, on pages
   that pair the "just heard" carousel with a map (home, partner, region). */
.live-latest-ping::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 50%;
    /* Same red as the "new species" division glow — readable on both the
       (pink) national map and the (green) topographic region maps. */
    border: 2px solid #e74c3c;
    pointer-events: none;
    animation: live-latest-ping 1.6s ease-out infinite;
}

/* Ring the exact map point: pin markers anchor at 50%/75% of their box
   (transform: translate(-50%, -75%)), circle markers at their centre. */
.map-marker.live-latest-ping::after,
.region-location-marker.live-latest-ping::after {
    top: 75%;
}

@keyframes live-latest-ping {
    0%   { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(3.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .live-latest-ping::after { animation: none; opacity: 0.6; transform: scale(2); }
}

/* Glow on division markers when a new species lands in them */
.division-marker.division-marker--has-new .division-circle {
    animation: division-marker-glow 1.6s ease-in-out infinite;
}

@keyframes division-marker-glow {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(231, 76, 60, 0.0)); }
    50%      { filter: drop-shadow(0 0 12px rgba(231, 76, 60, 0.85)); }
}

/* Hover highlight from the live panel onto map markers */
.live-hover-highlight .division-circle,
.live-hover-highlight img {
    filter: drop-shadow(0 0 6px var(--primary-color));
}
.live-hover-highlight {
    z-index: 8 !important;
}

/* === Home page redesign (Timon moderate) === */
/* Scoped under .home-redesign so we don't affect other pages.
   Bold straight black borders + flat offset shadows + color-blocked column headers. */

.home-redesign {
    position: relative;
    margin-top: 0.5rem;
    margin-bottom: 1.25rem;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
    /* Faint Timon pattern background */
    background-image: url('../media/decorations/bg_pattern.png');
    background-repeat: repeat;
    background-size: 280px auto;
    /* Tame the pink so the panels still pop */
    background-blend-mode: lighten;
    background-color: rgba(255, 255, 255, 0.88);
    isolation: isolate;
}

/* Soft white-ish wash to dampen pattern further, kept above bg, below panels */
.home-redesign::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.55);
    pointer-events: none;
    z-index: 0;
}

.home-redesign > [class*="col-"] {
    position: relative;
    z-index: 2;
}

/* Scattered decorative illustrations (no rotation, deliberate placement) */
.home-redesign .home-deco {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    opacity: 0.85;
    /* Light pink wash to tie into brand palette */
    filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.08));
}

.home-redesign .home-deco--notes {
    top: -8px;
    left: 30%;
    width: 70px;
}

.home-redesign .home-deco--ear {
    bottom: 6px;
    right: 1%;
    width: 90px;
}

.home-redesign .home-deco--mascot {
    bottom: -10px;
    left: 24%;
    width: 110px;
    opacity: 0.55;
}

/* Hide the largest deco below md to avoid clutter (desktop branch only anyway) */
@media (max-width: 991.98px) {
    .home-redesign .home-deco--mascot { display: none; }
}

/* --- Panel framework: thick straight black border + flat offset shadow --- */
.home-redesign .home-panel {
    background: #ffffff;
    border: 3px solid #000;
    border-radius: 2px;
    box-shadow: 6px 6px 0 #000;
    margin-right: 6px;       /* leave room for the offset shadow */
    margin-bottom: 6px;
    overflow: visible;       /* allow shadow to show */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.home-redesign .home-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem 0.3rem;
    border-bottom: 3px solid #000;
    font-family: 'Londrina Solid', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}

.home-redesign .home-panel-header-label {
    color: #000;
    font-size: 1.35rem;
    font-weight: 400;
    /* Subtle hand-drawn shift, kept minimal (no rotation per brief) */
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
}

.home-redesign .home-panel-header-dot {
    width: 14px;
    height: 14px;
    border: 2px solid #000;
    background: #fff;
    display: inline-block;
    flex-shrink: 0;
}

.home-redesign .home-panel-header--green { background: var(--primary-color); }
.home-redesign .home-panel-header--yellow { background: var(--yellow-color); }
.home-redesign .home-panel-header--pink { background: var(--secondary-color); }
.home-redesign .home-panel-header--blue { background: var(--blue-color); }

.home-redesign .home-panel-body {
    padding: 0.75rem 0.6rem;
    flex: 1 1 auto;
    background: #ffffff;
}

.home-redesign .home-panel-body--map {
    padding: 0.5rem;
}

.home-redesign .home-panel-body--live {
    padding: 0.5rem;
}

/* Map panel needs to keep map-container behavior intact */
.home-redesign .home-panel--map .home-panel-body--map > #map-container {
    margin-top: 0.25rem;
}

.home-redesign .home-panel--map .text-under-map {
    margin-top: 0.5rem;
    text-align: center;
}

.home-redesign .home-panel--map .text-under-map p {
    margin: 0;
    font-family: 'Londrina Solid', sans-serif;
    color: #000;
    font-size: 1rem;
    letter-spacing: 0.03em;
}

/* Map instruction text — repurposed inside the redesign panel */
.home-redesign .map-instruction-text {
    font-family: 'Londrina Solid', sans-serif;
    color: #000;
    font-size: 0.95rem;
    margin: 0 0 0.4rem;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}

/* Search input — boxy black border to match the panels */
.home-redesign .home-search-container input {
    border: 2px solid #000;
    border-radius: 2px;
    box-shadow: 3px 3px 0 #000;
    padding: 0.35rem 0.5rem;
    font-family: 'Londrina Solid', sans-serif;
    background: #fff;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.home-redesign .home-search-container input:focus {
    border-color: #000;
    box-shadow: 1px 1px 0 #000;
    transform: translate(2px, 2px);
    outline: none;
}

/* Location table — tighter inside the panel, black row separators */
.home-redesign .location-table-container {
    border: none;
    background: transparent;
    padding: 0;
}

.home-redesign .location-table tr.division-row > td {
    border-bottom: 2px solid #000;
    padding: 0.45rem 0.5rem;
    font-family: 'Londrina Solid', sans-serif;
    font-size: 1.05rem;
    background: #fff;
    transition: background-color 0.1s ease;
}

.home-redesign .location-table tr.division-row:hover > td,
.home-redesign .location-table tr.division-row.row-highlight > td {
    background: var(--yellow-color);
}

.home-redesign .location-table tr.division-locations-row > td {
    background: #fafafa;
    border-bottom: 2px solid #000;
    padding: 0.4rem 0.5rem 0.5rem 1.25rem;
}

.home-redesign .location-table .division-chevron {
    color: #000;
    margin-right: 0.25rem;
}

.home-redesign .location-table .badge.bg-secondary {
    background: #000 !important;
    color: var(--primary-color) !important;
    border-radius: 2px;
    font-family: 'Londrina Solid', sans-serif;
    font-weight: 400;
    padding: 0.15rem 0.4rem;
    font-size: 0.85rem;
}

.home-redesign .division-region-link,
.home-redesign .division-location-link {
    display: block;
    padding: 0.2rem 0.35rem;
    margin: 0.1rem 0;
    border: 1.5px solid transparent;
    background: transparent;
    color: #000;
    text-decoration: none;
    font-family: 'Londrina Solid', sans-serif;
    font-size: 0.95rem;
    transition: background-color 0.1s ease, border-color 0.1s ease, transform 0.08s ease;
}

.home-redesign .division-region-link:hover,
.home-redesign .division-location-link:hover,
.home-redesign .division-region-link.link-highlight,
.home-redesign .division-location-link.link-highlight {
    background: var(--primary-color);
    border-color: #000;
    transform: translate(-1px, -1px);
    box-shadow: 2px 2px 0 #000;
}

/* Live species panel — keep inner structure, restyle within */
.home-redesign .home-panel--live .home-live-species {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.home-redesign .home-live-species-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.45rem;
    margin: 0.25rem 0;
    border: 2px solid #000;
    border-radius: 2px;
    background: #fff;
    text-decoration: none;
    color: #000;
    transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.1s ease;
    box-shadow: 3px 3px 0 #000;
}

.home-redesign .home-live-species-row:hover {
    background: var(--yellow-color);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 #000;
}

.home-redesign .home-live-species-row--new {
    background: #fff7d6;
}

.home-redesign .home-live-species-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border: 2px solid #000;
    border-radius: 2px;
    background: #fff;
}

.home-redesign .home-live-species-name {
    font-family: 'Londrina Solid', sans-serif;
    font-size: 0.95rem;
    color: #000;
}

.home-redesign .home-live-species-loc {
    font-family: 'Londrina Solid', sans-serif;
    font-size: 0.75rem;
    color: #333;
    letter-spacing: 0.02em;
}

.home-redesign .home-live-species-new-tag {
    background: #000;
    color: var(--secondary-color);
    border-radius: 2px;
    padding: 1px 6px;
    font-family: 'Londrina Solid', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Pulsing dot in the live header (replaces the previous title dot) */
.home-redesign .home-panel-header-pulse {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #000;
    animation: home-pulse-dot 1.6s ease-in-out infinite;
}

@keyframes home-pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.0); }
    50%      { box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.15); }
}

/* Keep decorations behind interactive elements on the map */
.home-redesign #map-container,
.home-redesign .home-panel {
    position: relative;
    z-index: 2;
}

/* Make sure the existing review-bird-btn / event button still float on top of the map image */
.home-redesign .home-panel--map .review-bird-btn {
    z-index: 60;
}

/* === End === */


/* === Home page redesign (Timon strong / wobbly) === */
/* Hand-drawn marker-pen style. Activate by adding `home-redesign--strong`
   to the `.home-redesign` row. The visual wobble comes from an SVG
   turbulence filter applied to border-only pseudo-elements, so text
   stays sharp while the outlines look hand-drawn. */

.home-redesign--strong {
    padding: 18px 6px 32px;
}

/* Off-kilter column rotations */
.home-redesign--strong > [class*="col-md-"]:nth-child(1) .home-panel { transform: rotate(-0.8deg); }
.home-redesign--strong > [class*="col-md-"]:nth-child(2) .home-panel { transform: rotate(0.4deg); }
.home-redesign--strong > [class*="col-md-"]:nth-child(3) .home-panel { transform: rotate(-1deg); }

/* Reset moderate's clean borders/shadows on panels */
.home-redesign--strong .home-panel {
    border: none !important;
    box-shadow: none !important;
    position: relative;
    overflow: visible;
    background: transparent !important;
    padding: 0;
}

/* Panel color block sits behind content, drawn with a hand-drawn wobbly black border */
.home-redesign--strong .home-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border: 2.5px solid #111;
    border-radius: 22px 30px 18px 26px / 26px 18px 30px 22px;
    filter: url(#timon-wobble);
}
.home-redesign--strong .home-panel--locations::before { background: var(--primary-color); }
.home-redesign--strong .home-panel--map::before       { background: var(--yellow-color); }
.home-redesign--strong .home-panel--live::before      { background: var(--secondary-color); }

/* Content wrapper */
.home-redesign--strong .home-panel > * {
    position: relative;
    z-index: 1;
}

/* Header floats on the color block — no separate background or rule */
.home-redesign--strong .home-panel-header {
    background: transparent !important;
    color: #111;
    border-bottom: none;
    padding: 16px 22px 8px;
    font-size: 1.6rem;
    letter-spacing: 1px;
}

/* Inner body card has its own wobbly border */
.home-redesign--strong .home-panel-body {
    background: #fffaf2;
    border-radius: 16px 22px 14px 20px / 20px 14px 22px 16px;
    margin: 0 12px 14px;
    padding: 14px;
    position: relative;
}
.home-redesign--strong .home-panel-body::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid #111;
    border-radius: 16px 22px 14px 20px / 20px 14px 22px 16px;
    pointer-events: none;
    filter: url(#timon-wobble-soft);
}

/* Live-species rows with hand-drawn outlines */
.home-redesign--strong .home-live-species-row {
    border: none;
    background: #fffaf2;
    border-radius: 14px 22px 12px 18px / 18px 12px 22px 14px;
    position: relative;
    box-shadow: none;
    transition: transform 0.15s ease;
}
.home-redesign--strong .home-live-species-row::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid #111;
    border-radius: inherit;
    pointer-events: none;
    filter: url(#timon-wobble-soft);
}
.home-redesign--strong .home-live-species-row:nth-child(3n)   { transform: rotate(-1deg); }
.home-redesign--strong .home-live-species-row:nth-child(3n+1) { transform: rotate(0.7deg); }
.home-redesign--strong .home-live-species-row:nth-child(3n+2) { transform: rotate(-0.4deg); }
.home-redesign--strong .home-live-species-row:hover {
    transform: rotate(0) translateY(-2px);
}
.home-redesign--strong .home-live-species-row--new {
    background: var(--yellow-color);
}

/* Location-table rows: tilted, with wobbly outlines */
.home-redesign--strong .location-table { border-collapse: separate; border-spacing: 0 8px; }
.home-redesign--strong .location-table-row.division-row td {
    border: none;
    border-radius: 12px 20px 10px 18px / 18px 10px 20px 12px;
    background: #fffaf2;
    padding: 10px 14px;
    position: relative;
}
.home-redesign--strong .location-table-row.division-row td::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid #111;
    border-radius: inherit;
    pointer-events: none;
    filter: url(#timon-wobble-soft);
}
.home-redesign--strong .location-table-row.division-row:nth-child(odd)  td { transform: rotate(-0.35deg); }
.home-redesign--strong .location-table-row.division-row:nth-child(even) td { transform: rotate(0.45deg); }

/* Division-row count chip — replaces Bootstrap .badge */
.home-redesign--strong .division-row-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 28px;
    padding: 0 10px;
    margin-left: auto;
    background: var(--primary-color);
    color: #111;
    font-family: var(--header-font);
    font-size: 1rem;
    line-height: 1;
    border-radius: 12px 18px 10px 16px / 16px 10px 18px 12px;
    position: relative;
}
.home-redesign--strong .division-row-count::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid #111;
    border-radius: inherit;
    pointer-events: none;
    filter: url(#timon-wobble-soft);
}
.home-redesign--strong .division-row > td {
    display: flex;
    align-items: center;
    gap: 8px;
}
.home-redesign--strong .division-row-name {
    flex: 1;
    min-width: 0;
}

/* Dedicated search bar above the three columns */
.home-search-bar {
    margin: 8px 0 18px;
    display: flex;
    justify-content: center;
}
.home-search-bar-inner {
    position: relative;
    width: 100%;
    max-width: 520px;
    background: #fffaf2;
    border-radius: 20px 28px 18px 24px / 24px 18px 28px 20px;
    padding: 4px 16px 4px 44px;
}
.home-search-bar-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2.5px solid #111;
    border-radius: inherit;
    pointer-events: none;
    filter: url(#timon-wobble-soft);
}
.home-search-bar-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: #111;
}
.home-search-bar #home-search {
    border: none !important;
    background: transparent;
    box-shadow: none;
    font-size: 1.05rem;
    padding: 10px 8px;
    width: 100%;
    color: #111;
}
.home-search-bar #home-search:focus {
    outline: none;
    box-shadow: none;
}

/* === End strong === */


/* === Home page redesign (Carousel variant — wilder-land style) === */
/* Clean, white, no borders. Horizontal bird carousel above map + locations. */

/* --- Override older vertical-list styles within the carousel scope --- */
/* (The renderRows JS keeps `home-live-species-row` for backwards compat.
   These rules win via increased specificity.) */
.home-carousel-section .home-live-species-list {
    flex-direction: row;
    gap: 16px;
    max-height: none;
    overflow-y: hidden;
    overflow-x: auto;
}

.home-carousel-section .home-bird-card.home-live-species-row {
    display: block;          /* not the older flex-row */
    align-items: initial;
    padding: 0;
    border: none;
    background: #fff;
    border-radius: 0;
}

.home-carousel-section .home-bird-card.home-live-species-row:hover {
    background: #fff;
    border: none;
}

.home-carousel-section .home-bird-card .home-live-species-thumb {
    width: 100%;
    height: 100%;
    border-radius: 0;
    flex-shrink: initial;
}

/* --- Bird carousel section --- */
.home-carousel-section {
    position: relative;
    margin: 16px 0 32px;
    background: #fff;
    padding: 12px 24px 20px;
    border-radius: 12px;
}

/* Live indicator overlaid on the carousel, top-left, doesn't take vertical space */
.home-carousel-head {
    position: absolute;
    top: 14px;
    left: 24px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.home-carousel-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-family: var(--header-font);
    font-size: 1.3rem;
    color: var(--earth-text);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.home-carousel-title .home-carousel-dot,
span.home-carousel-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 10px;
    border-radius: 50%;
    background-color: #84ED7D !important;
    background-image: none !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
    animation: home-live-dot-blink 1s steps(2, start) infinite;
    vertical-align: middle;
    flex-shrink: 0;
}

@keyframes home-live-dot-blink {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0.35; }
}

.home-carousel-wrap {
    position: relative;
    /* No side gutters — arrows now live below, giving the birds the full width */
    padding: 0;
}

/* Control row beneath the carousel: prev arrow at the far left, next arrow at
   the far right, dots centered between them. */
.home-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
}

.home-carousel-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    /* Same hue as the pagination dots, dark enough for the white glyph */
    background: var(--secondary-text-color);
    color: #fff;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: filter 0.15s ease, transform 0.1s ease;
}

.home-carousel-arrow-glyph {
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    margin-top: -3px; /* optical centering of the chevron glyph */
}
.home-carousel-arrow:hover  { filter: brightness(1.08); transform: scale(1.06); }
.home-carousel-arrow:active { transform: scale(0.95); }

.home-carousel-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 8px 4px 16px;
    /* Hide scrollbar — clean look */
    scrollbar-width: none;
}
.home-carousel-track::-webkit-scrollbar { display: none; }

/* Each bird card — 5 fit across the visible track (4 gaps of 16px) */
.home-bird-card {
    --card-gap: 16px;
    flex: 0 0 calc((100% - 4 * var(--card-gap)) / 5);
    scroll-snap-align: start;
    background: #fff;
    border-radius: 0;
    text-decoration: none;
    color: var(--earth-text);
    transition: transform 0.2s ease;
    /* A flex item is at least as wide as its widest unbreakable line, and the
       texts below do not wrap: "Volkstuinencomplex Levenslust Kerkpolder"
       made its card -- and with it the photo -- twice as wide as the others
       on a phone (owner, 2026-10-19). Zero lets the card keep its share and
       the text give way. */
    min-width: 0;
}
.home-bird-card:hover {
    transform: translateY(-4px);
    color: var(--earth-text);
    text-decoration: none;
}

.home-bird-card-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fff;
}
.home-bird-card-photo .home-live-species-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
    transition: transform 0.4s ease;
    /* Hide the alt-text flash before the image decodes; alt stays available to AT */
    color: transparent;
    font-size: 0;
}
.home-bird-card:hover .home-bird-card-photo .home-live-species-thumb {
    transform: scale(1.04);
}

.home-bird-card-photo .home-live-species-new-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #111;
    background: var(--primary-color);
    border-radius: 0;
    z-index: 2;
}

/* Pagination dots — sit inline with the arrows in .home-carousel-controls */
.home-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
}

/* Dots share the arrows' colour (the secondary/pink accent) */
.home-carousel-dot-btn {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(255, 109, 195, 0.3);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.home-carousel-dot-btn:hover {
    background: rgba(255, 109, 195, 0.6);
}

.home-carousel-dot-btn--active {
    background: var(--secondary-color);
    transform: scale(1.3);
}

/* Card body below the photo: time / name / location stacked, centered, pink */
.home-bird-card-body {
    padding: 12px 6px 0;
    text-align: center;
    color: var(--secondary-text-color);
    font-family: var(--header-font);
}

.home-bird-card-time,
.home-bird-card-name,
.home-bird-card-loc {
    color: var(--secondary-text-color);
    font-family: var(--header-font);
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-bird-card-time {
    font-size: 0.85rem;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.home-bird-card-name {
    font-size: 1.5rem;
    margin-bottom: 2px;
}

.home-bird-card-loc {
    font-size: 0.9rem;
    /* Where it was heard says more than a cut-off word: two lines, then an
       ellipsis; a word longer than the card breaks. */
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* New-arrival bump-in animation: slide from left and settle */
@keyframes bump-in-from-left {
    0%   { opacity: 0; transform: translateX(-40px) scale(0.94); }
    65%  { opacity: 1; transform: translateX(4px)   scale(1.03); }
    100% { opacity: 1; transform: translateX(0)     scale(1); }
}
.home-bird-card--bump {
    animation: bump-in-from-left 0.55s cubic-bezier(.34, 1.56, .64, 1) 1;
}

/* --- Desktop carousel: shorter box so the whole carousel takes less vertical
   space, with a uniform whitespace frame around each bird.
   Sizing trick: force every bird to the SAME height (the box height) with
   width:auto + object-fit:contain. This gives a consistent visual size for all
   birds (so newly added ones aren't larger than the first set) while never
   cropping — tails/feet stay inside the frame. Wide birds are clamped by
   max-width and letterboxed rather than cut off. --- */
/* Every bird in the same frame, on every screen: the photo is fitted whole
   (contain, never cropped) into a box of fixed size, absolutely placed so the
   box's height does not depend on a percentage of an aspect-ratio height --
   which browsers resolve differently, and where they did not, a photo showed
   at its own size. On phones the photos used to fill a square by cropping
   (cover), which blew a wide photo up past the others. */
.home-carousel-section .home-bird-card-photo {
    --bird-frame: 8px;
    padding: 0;
}
.home-carousel-section .home-bird-card-photo .home-live-species-thumb {
    position: absolute;
    top: var(--bird-frame);
    left: var(--bird-frame);
    width: calc(100% - 2 * var(--bird-frame));
    height: calc(100% - 2 * var(--bird-frame));
    max-width: none;
    margin: 0;
    object-fit: contain;
}
@media (min-width: 768px) {
    .home-carousel-section .home-bird-card-photo {
        --bird-frame: 12px;
        aspect-ratio: 4 / 3;
    }
}

/* --- Mobile carousel: show 2 cards across with smaller chrome --- */
@media (max-width: 767.98px) {
    .home-carousel-section {
        margin: 12px 0 24px;
        padding: 10px 10px 16px;
    }
    .home-carousel-head {
        top: 12px;
        left: 16px;
    }
    .home-carousel-title {
        font-size: 1.05rem;
        letter-spacing: 0.5px;
    }
    .home-carousel-title .home-carousel-dot,
    span.home-carousel-dot {
        width: 11px;
        height: 11px;
        margin-left: 6px;
    }
    /* Arrows live below the track (in .home-carousel-controls); keep them
       a touch smaller on mobile. */
    .home-carousel-arrow {
        width: 34px;
        height: 34px;
    }
    .home-carousel-arrow-glyph {
        font-size: 1.4rem;
    }
    /* Two-and-a-half cards across: the third bird peeks in to hint at scroll */
    .home-bird-card {
        flex: 0 0 calc((100% - 2 * var(--card-gap)) / 2.5);
    }
    .home-bird-card-name {
        font-size: 1.2rem;
    }
    .home-bird-card-time {
        font-size: 0.78rem;
    }
    .home-bird-card-loc {
        font-size: 0.82rem;
    }
}

/* --- Section headings used for map + locations --- */
.home-carousel-variant .home-section-head {
    margin-bottom: 12px;
    padding: 0 4px;
}

.home-carousel-variant .home-section-title {
    font-family: var(--header-font);
    font-size: 1.6rem;
    color: var(--earth-text);
    margin: 0;
    letter-spacing: 0.5px;
}

/* Search input in the locations column */
.home-carousel-variant .home-search-container {
    position: relative;
}

.home-carousel-variant .home-search-container .home-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--earth-text);
    opacity: 0.5;
    pointer-events: none;
    font-size: 0.95rem;
}

.home-carousel-variant #home-search {
    background: var(--light-bg);
    border: none !important;
    border-radius: 999px;
    padding: 10px 14px 10px 38px;
    font-size: 0.95rem;
    box-shadow: none;
}
.home-carousel-variant #home-search:focus {
    background: #fff;
    box-shadow: 0 0 0 2px var(--primary-color);
    outline: none;
}

/* Location table: minimal, clean — all text in brand pink */
.home-carousel-variant .location-table {
    width: 100%;
    border-collapse: collapse;
}
.home-carousel-variant .location-table-row.division-row td {
    padding: 12px 8px;
    border: none;
    border-bottom: 1px solid rgba(255, 109, 195, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}
.home-carousel-variant .location-table-row.division-row:hover td {
    background: rgba(255, 109, 195, 0.06);
}
.home-carousel-variant .division-row-name {
    flex: 1;
    font-family: var(--header-font);
    font-size: 1.1rem;
    color: var(--secondary-text-color);
}
.home-carousel-variant .division-row-count {
    font-size: 0.85rem;
    color: var(--secondary-text-color);
    /* 0.7 dropped this to 4.09:1; 0.85 keeps it secondary and clears AA. */
    opacity: 0.85;
    font-family: var(--header-font);
}
.home-carousel-variant .division-chevron {
    color: var(--secondary-text-color);
    opacity: 0.6;
    font-size: 0.9rem;
}

/* Region/location dropdown links in the carousel variant */
.home-carousel-variant .division-region-link,
.home-carousel-variant .division-location-link {
    color: var(--secondary-text-color);
}
.home-carousel-variant .division-region-link:hover,
.home-carousel-variant .division-region-link.link-highlight,
.home-carousel-variant .division-location-link:hover,
.home-carousel-variant .division-location-link.link-highlight {
    color: var(--secondary-text-color);
    background-color: rgba(255, 109, 195, 0.1);
}

/* === End carousel variant === */

/* === Spectrogram audio player (quiz, species pages) ============= */
.ss-player {
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 12px;
}
.ss-spectrogram-wrap {
    position: relative;
    cursor: pointer;
    background: #1a1a2e;
    border-radius: 6px;
    overflow: hidden;
}
.ss-spectrogram-wrap canvas {
    display: block;
    width: 100%;
    height: 140px;
}
.ss-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255, 255, 255, 0.85);
    pointer-events: none;
    display: none;
}
.ss-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.ss-ctrl-btn {
    background: none;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 13px;
    cursor: pointer;
    color: #444;
    transition: background 0.1s;
}
.ss-ctrl-btn:hover { background: #f0f0f0; }
.ss-ctrl-btn:disabled { opacity: 0.4; cursor: default; }
.ss-time { min-width: 84px; font-variant-numeric: tabular-nums; }
.ss-gain { width: 90px; accent-color: var(--primary-color); }
/* === End spectrogram audio player =============================== */

/* === Mobile location track map ================================== */
.mobile-location-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--secondary-text-color);
    color: var(--light-text);
    font-family: var(--header-font);
    font-size: 1.1rem;
    line-height: 1;
    padding: 6px 12px;
    border-radius: 999px;
    transform: rotate(-3deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.mobile-track-card {
    background-color: #ffffff;
    border: 4px solid var(--secondary-color);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* Stay beside the table as the user scrolls a long list. */
    position: sticky;
    top: 20px;
}

.mobile-track-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background-color: rgba(132, 237, 125, 0.4);
    border-bottom: 4px solid var(--secondary-color);
    padding: 12px 18px;
}

.mobile-track-card__title {
    font-family: var(--header-font);
    color: var(--secondary-text-color);
    font-size: 1.8rem;
    line-height: 1.1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-track-card__stats {
    display: flex;
    gap: 18px;
}

.mobile-track-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.mobile-track-stat__value {
    font-family: var(--header-font);
    font-size: 2rem;
    color: var(--earth-text);
}

.mobile-track-stat__label {
    font-size: 0.95rem;
    color: var(--secondary-text-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mobile-track-card__map-wrap {
    position: relative;
}

#mobile-track-map {
    height: 460px;
    width: 100%;
}

.mobile-track-empty {
    position: absolute;
    inset: 0;
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: rgba(245, 248, 245, 0.92);
    color: var(--earth-text);
    font-family: var(--header-font);
    font-size: 1.4rem;
    text-align: center;
    padding: 20px;
}

.mobile-track-empty i {
    font-size: 2.6rem;
    color: var(--secondary-text-color);
}

.mobile-track-card__legend {
    display: flex;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
    padding: 12px 18px;
    background-color: #ffffff;
    border-top: 1px solid var(--border-color);
    font-size: 1.05rem;
    color: var(--earth-text);
}

.mobile-track-card__legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.track-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.track-dot--start {
    background-color: var(--primary-color);
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 2px var(--primary-color);
}

.track-dot--line {
    width: 22px;
    height: 5px;
    border-radius: 3px;
    background-color: var(--secondary-color);
}

.track-dot--end {
    width: 12px;
    height: 16px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background-color: var(--secondary-color);
}

/* Leaflet divIcon for the route's starting fix. */
.mobile-track-marker--start span {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--primary-color);
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 2px var(--primary-color), 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Leaflet divIcon for the route's latest fix (CSS pin, no image dependency). */
.mobile-track-marker--end span {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background-color: var(--secondary-color);
    border: 3px solid #ffffff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
}

/* Prev/next day & month browser above the mobile-location detections table. */
.mobile-date-nav__label {
    min-width: 9rem;
    text-align: center;
    color: var(--earth-text);
    font-size: 1.1rem;
}

.mobile-date-nav__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
}

.mobile-date-nav__btn.disabled {
    opacity: 0.4;
    pointer-events: none;
}

@media (max-width: 991.98px) {
    .mobile-track-card {
        position: static;
        margin-bottom: 30px;
    }
    #mobile-track-map {
        height: 320px;
    }
}
/* === End mobile location track map ============================== */

/* === Guide species hub (Binck 5) =============================== */
.guide-hub {
    --guide-green: #4faf57;
    --guide-blue: #4f96c6;
    --guide-sand: #b9a98f;
    --guide-pink: #e05fa8;
    --guide-ink: #4a3830;
    --guide-line: rgba(74, 56, 48, 0.14);
    --guide-border: #6b8f4e;         /* clearly-visible playful card outline */
    /* Honey-amber "gold" for guide species (richer than the site yellow),
       sky-blue for their stepping-stone species. */
    --guide-gold: #e8991c;
    --guide-gold-grad: linear-gradient(150deg, #f6bc45, #e0851d);
    --guide-gold-glow: rgba(224, 133, 29, 0.35);
    --guide-sky-grad: linear-gradient(150deg, #7cc2e4, #4f96c6);
    --guide-sky-glow: rgba(79, 150, 198, 0.35);
    /* White content panel over the site background photo (like /about/). */
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 0.5rem 1.75rem 2.5rem;
}

@media (max-width: 575px) {
    .guide-hub { padding: 0.25rem 1rem 2rem; }
}

@keyframes guide-pulse {
    0% { box-shadow: 0 0 0 0 rgba(79, 175, 87, 0.5); }
    70% { box-shadow: 0 0 0 0.7rem rgba(79, 175, 87, 0); }
    100% { box-shadow: 0 0 0 0 rgba(79, 175, 87, 0); }
}

/* ---- Header: title on the left, badge + sticker links on the right */
.guide-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding: 2rem 0 1rem;
}

.guide-header__lead { text-align: left; }

.guide-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 1.75rem;
}

.guide-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.15rem;
    color: var(--secondary-text-color);
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.guide-title.location-title {
    display: inline-block;
    margin: 0;
    font-size: clamp(2.6rem, 6vw, 4.4rem);
    line-height: 1;
}

.guide-title.location-title a { color: inherit; text-decoration: none; }
.guide-title.location-title a:hover { color: var(--guide-pink); }

.guide-subtitle {
    margin: 0.4rem 0 0;
    font-size: 1.25rem;
    color: var(--earth-text);
    max-width: 60ch;
}

/* Live "now present" pill, inline in the header. */
.guide-pulse-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: #fff;
    border: 2px solid var(--secondary-color);
    border-radius: 999px;
    padding: 0.4rem 1.1rem 0.4rem 0.75rem;
    box-shadow: 0 4px 0 rgba(255, 109, 195, 0.25);
}

.guide-pulse-badge__dot {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: var(--guide-green);
    box-shadow: 0 0 0 0 rgba(79, 175, 87, 0.55);
    animation: guide-pulse 2s infinite;
}

.guide-pulse-badge__count {
    font-family: var(--header-font);
    font-size: 1.7rem;
    line-height: 1;
    color: var(--guide-green);
}

.guide-pulse-badge__total { color: var(--guide-sand); font-size: 1.1rem; }

.guide-pulse-badge__label {
    font-size: 0.9rem;
    color: var(--earth-text);
    max-width: 10ch;
    line-height: 1.1;
    text-align: left;
}

/* ---- Sticker links (replace the tab bar; "Review a Bird" style) - */
.guide-stickers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin: 0;
}

.guide-sticker {
    position: relative;
    display: inline-block;
    text-decoration: none;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.22));
    transition: transform 0.2s, filter 0.2s;
}

.guide-sticker:hover {
    transform: scale(1.1) rotate(-3deg);
    filter: drop-shadow(0 5px 14px rgba(0, 0, 0, 0.3));
}

.guide-sticker:nth-child(even):hover { transform: scale(1.1) rotate(3deg); }

.guide-sticker__img {
    width: 74px;
    height: auto;
    display: block;
}

.guide-sticker__label {
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-10deg);
    font-size: 0.66rem;
    font-weight: 800;
    color: #fff;
    /* Dark rounded backing + strong shadow so the white text stays legible
       over the light/pink marker artwork. */
    background: rgba(43, 30, 24, 0.66);
    padding: 0.2rem 0.4rem;
    border-radius: 0.5rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: center;
    line-height: 1.2;
    width: 5.5rem;
    pointer-events: none;
}

/* ---- Dashboard: web (left) + carousel/why/map (right column) ----- */
.guide-dash {
    display: grid;
    /* minmax(0, …): stop the carousel's intrinsic width (one card per
       species heard) from blowing up the column and squeezing the web.
       The right column gets the larger share so ~4.5 carousel cards fit. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    /* "Why guide species?" opens the hub top-left; the ecosystem web fills the
       left column beneath it, with the live carousel + location on the right. */
    grid-template-areas:
        "why carousel"
        "web map";
    grid-template-rows: auto 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
    align-items: stretch;
}

.guide-dash > * { min-width: 0; }

.guide-dash .guide-web-section { grid-area: web; margin-top: 0; display: flex; flex-direction: column; }
.guide-dash .guide-web { flex: 1 1 auto; }
.guide-dash .guide-carousel { grid-area: carousel; margin-top: 0; }
.guide-dash .guide-why { grid-area: why; }
/* Map + photo stacked (not side by side): side by side they became two tall,
   narrow boxes — stacking gives each a wider, more natural aspect ratio.
   Used on both the hub and the project page (via _guide_locale.html). */
.guide-locale { display: flex; flex-direction: column; gap: 1.5rem; align-items: stretch; }
.guide-locale > * { flex: 1 1 0; min-width: 0; min-height: 200px; }
.guide-dash .guide-locale { grid-area: map; }
/* When only one of map/photo is present it fills the row on its own. */

.guide-why__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.7rem;
    font-weight: 700;
    color: var(--guide-pink);
    text-decoration: none;
}

.guide-why__link:hover { color: var(--secondary-text-color); gap: 0.6rem; }

.guide-why {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    background: linear-gradient(120deg, rgba(132, 237, 125, 0.22), rgba(118, 191, 233, 0.2));
    border: 2px solid var(--guide-border);
    border-radius: 1.25rem;
    padding: 1.4rem 1.6rem;
    box-shadow: 0 6px 0 rgba(107, 143, 78, 0.18);
}

.guide-why__icon {
    flex: none;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--guide-green);
    color: #fff;
    font-size: 1.3rem;
}

.guide-why__title {
    font-family: var(--header-font);
    font-size: 1.7rem;
    color: var(--guide-ink);
    margin: 0 0 0.2rem;
}

.guide-why__text p {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--earth-text);
}

/* Small location map. */
.guide-map-card {
    position: relative;
    border: 2px solid var(--guide-border);
    border-radius: 1.25rem;
    overflow: hidden;
    min-height: 190px;
    background: var(--light-bg);
    box-shadow: 0 6px 0 rgba(107, 143, 78, 0.18);
}

.guide-map { position: absolute; inset: 0; }

/* Location photo shown next to the map. */
.guide-photo-card {
    position: relative;
    border: 2px solid var(--guide-border);
    border-radius: 1.25rem;
    overflow: hidden;
    min-height: 190px;
    background: var(--light-bg);
    box-shadow: 0 6px 0 rgba(107, 143, 78, 0.18);
}

.guide-photo-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.guide-map-link {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    z-index: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #fff;
    color: var(--guide-ink);
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(74, 56, 48, 0.18);
}

.guide-map-link i { color: var(--guide-pink); }

/* ---- Heard-now carousel (home gallery, guide tweaks) ------------ */
.guide-carousel {
    margin-top: 1.5rem;
    padding: 16px 28px 24px;
    border: 2px solid var(--guide-border);
    box-shadow: 0 6px 0 rgba(107, 143, 78, 0.18);
}

/* Guide (honey gold) and stepping-stone (sky blue) hits in the carousel:
   a gradient frame, a soft glow, and a role ribbon across the photo. */
.guide-hit--guide { --hit-grad: var(--guide-gold-grad); --hit-glow: var(--guide-gold-glow); }
.guide-hit--support { --hit-grad: var(--guide-sky-grad); --hit-glow: var(--guide-sky-glow); }

.guide-carousel .home-bird-card.guide-hit {
    border: 3px solid transparent;
    border-radius: 0.9rem;
    background: linear-gradient(#fff, #fff) padding-box, var(--hit-grad) border-box;
    box-shadow: 0 4px 16px var(--hit-glow);
    overflow: hidden;
}

.guide-carousel .home-bird-card.guide-hit--guide {
    animation: guide-hit-glow 2.6s ease-in-out infinite;
}

@keyframes guide-hit-glow {
    0%, 100% { box-shadow: 0 4px 16px var(--hit-glow); }
    50% { box-shadow: 0 4px 26px var(--hit-glow), 0 0 0 4px var(--hit-glow); }
}

.guide-hit__flag {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.24rem 0.3rem;
    font-family: var(--header-font);
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    background: var(--hit-grad);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Announcement overlay (guide/stepping-stone heard) ----------- */
.guide-hit-overlay {
    --hit-grad: var(--guide-gold-grad);
    --hit-glow: var(--guide-gold-glow);
    position: fixed;
    inset: 0;
    background: rgba(43, 30, 24, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    cursor: pointer;
    padding: 1.25rem;
}

.guide-hit-overlay[data-kind="support"] {
    --hit-grad: var(--guide-sky-grad);
    --hit-glow: var(--guide-sky-glow);
}

.guide-hit-overlay.show {
    display: flex;
    animation: overlayFadeIn 0.4s ease-out;
}

.guide-hit-card {
    position: relative;
    text-align: center;
    border: 4px solid transparent;
    border-radius: 1.6rem;
    background: linear-gradient(180deg, #fff, #fffaf1) padding-box, var(--hit-grad) border-box;
    padding: 2.4rem 2.2rem 1.5rem;
    width: min(92vw, 34rem);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 60px var(--hit-glow);
    animation: slideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.guide-hit-card__badge {
    position: absolute;
    top: -1.15rem;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    background: var(--hit-grad);
    color: #fff;
    font-family: var(--header-font);
    font-size: 1.35rem;
    line-height: 1;
    padding: 0.45rem 1.3rem;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}

.guide-hit-card__photo {
    width: min(70vw, 20rem);
    max-height: 45vh;
    object-fit: contain;
    background: #fff;
    border-radius: 0.8rem;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
    transform: rotate(-1.5deg);
    margin-bottom: 1.2rem;
    animation: birdPulse 2.4s ease-in-out infinite;
}

.guide-hit-card__name {
    font-family: var(--header-font);
    font-size: clamp(2rem, 6vw, 2.8rem);
    color: var(--guide-ink);
    margin: 0 0 0.25rem;
}

.guide-hit-card__msg {
    font-size: 1.35rem;
    color: var(--earth-text);
    margin: 0;
}

.guide-hit-card__hint {
    display: block;
    margin-top: 1.1rem;
    font-size: 0.95rem;
    color: var(--guide-sand);
}

/* ---- Guide cards ------------------------------------------------- */
.guide-grid {
    margin-top: 2.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
    gap: 1.75rem;
}

.guide-card {
    position: relative;
    background: #fff;
    border: 2px solid var(--guide-border);
    border-radius: 1.4rem;
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    box-shadow: 0 6px 0 rgba(107, 143, 78, 0.18);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.guide-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 0 rgba(107, 143, 78, 0.22);
}

/* Whole card links to the species on the /soorten/ page. The name is a real
   link whose ::after overlay covers the card; stepping-stone links sit above
   it (z-index) so they stay independently clickable. */
.guide-card__link { color: inherit; text-decoration: none; }
.guide-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 1.4rem;
    z-index: 1;
}
.guide-card:hover .guide-card__name { text-decoration: underline; }
.guide-card .guide-stone { position: relative; z-index: 2; }

/* Offset so a #soort- anchor target isn't hidden under the top nav. */
.guide-info-card { scroll-margin-top: 90px; }

.guide-card--aanwezig,
.guide-card--waargenomen {
    border-color: var(--guide-green);
    box-shadow: 0 6px 0 rgba(79, 175, 87, 0.28);
}

.guide-card.is-live {
    border-color: var(--guide-green);
    box-shadow: 0 0 0 0.28rem rgba(79, 175, 87, 0.22);
}

.guide-card__lead {
    display: flex;
    gap: 1.1rem;
    align-items: center;
}

.guide-card__portrait {
    position: relative;
    flex: none;
    width: 6.2rem;
    height: 6.2rem;
}

.guide-card__portrait img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(74, 56, 48, 0.15);
    background: var(--light-bg);
}

/* Non-monitored members (fish, butterfly): show the full illustration
   inside the circle instead of a cover-crop. */
.guide-card__portrait--full img {
    object-fit: contain;
    background: #fff;
    padding: 0.4rem;
}

.guide-card__live-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 3px solid var(--guide-green);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.guide-card.is-live .guide-card__live-ring {
    opacity: 1;
    animation: guide-pulse 2s infinite;
}

.guide-card__id { min-width: 0; }

.guide-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.35rem;
}

.guide-status--aanwezig { background: var(--guide-green); }
.guide-status--waargenomen { background: var(--guide-green); }
.guide-status--eerder_gezien { background: var(--guide-blue); }
.guide-status--nog_niet { background: var(--guide-sand); }
.guide-status--monitoring_volgt {
    background: #fff;
    color: var(--guide-pink);
    border: 2px solid var(--guide-pink);
    padding: 0.12rem 0.65rem;
}

.guide-card__name {
    font-family: var(--header-font);
    font-size: 1.9rem;
    line-height: 1;
    margin: 0;
    color: var(--guide-ink);
}

.guide-card__name a { color: inherit; text-decoration: none; }
.guide-card__name a:hover { color: var(--secondary-text-color); }

.guide-card__sci {
    margin: 0.15rem 0 0;
    font-style: italic;
    color: var(--guide-sand);
    font-size: 1rem;
}

.guide-card__last {
    margin: 0.4rem 0 0;
    font-size: 1rem;
    color: var(--guide-green);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.guide-card__note {
    margin: 0;
    padding: 0.75rem 0.9rem;
    background: rgba(224, 95, 168, 0.08);
    border-radius: 0.9rem;
    color: var(--earth-text);
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.guide-card__note i { color: var(--guide-pink); }

/* ---- Stepping-stone trail --------------------------------------- */
.guide-trail {
    border-top: 2px dashed var(--guide-line);
    padding-top: 1rem;
}

.guide-trail__label {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--guide-ink);
}

.guide-trail__track {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    overflow-x: auto;
    padding-bottom: 0.35rem;
    scrollbar-width: thin;
}

/* Dotted path linking the stones. */
.guide-trail__track::before {
    content: "";
    position: absolute;
    top: 1.6rem;
    left: 1.6rem;
    right: 2.4rem;
    border-top: 2px dotted var(--guide-line);
    z-index: 0;
}

.guide-stone {
    position: relative;
    z-index: 1;
    flex: none;
    width: 3.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-decoration: none;
    color: var(--guide-sand);
}

.guide-stone__ring {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    padding: 3px;
    background: #fff;
    border: 2px solid var(--guide-line);
    display: grid;
    place-items: center;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.guide-stone__ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    filter: grayscale(1);
    opacity: 0.5;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.guide-stone__name {
    font-size: 0.78rem;
    line-height: 1.05;
    text-align: center;
    max-width: 4.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guide-stone.is-seen { color: var(--guide-ink); }
.guide-stone.is-seen .guide-stone__ring {
    border-color: var(--guide-green);
    box-shadow: 0 3px 10px rgba(79, 175, 87, 0.25);
}
.guide-stone.is-seen .guide-stone__ring img {
    filter: none;
    opacity: 1;
}

.guide-stone:hover .guide-stone__ring { transform: translateY(-2px); }

/* A stone lighting up live gets a green pulse. */
.guide-stone.is-live .guide-stone__ring {
    border-color: var(--guide-green);
    animation: guide-pulse 2s infinite;
}

.guide-trail__goal {
    flex: none;
    align-self: center;
    color: var(--guide-sand);
    font-size: 1.3rem;
    padding-left: 0.2rem;
}

.guide-empty {
    grid-column: 1 / -1;
    color: var(--guide-sand);
    font-size: 1.2rem;
}

/* ---- Text subpages (project / species info) ---------------------- */
.guide-prose {
    max-width: 68ch;
    margin-top: 1.75rem;
    font-size: 1.2rem;
    line-height: 1.6;
}

/* Project page: prose beside the location map + photo. */
.guide-project-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}
.guide-project-media { margin-top: 1.75rem; }
@media (max-width: 900px) {
    .guide-project-layout { grid-template-columns: 1fr; gap: 1.25rem; }
    .guide-project-media { margin-top: 0; }
}

.guide-species-list { margin-top: 1.75rem; display: grid; gap: 1.1rem; }

.guide-species-entry {
    background: #fff;
    border: 2px solid var(--guide-border);
    border-radius: 1.2rem;
    padding: 1.25rem 1.4rem;
    box-shadow: 0 6px 0 rgba(107, 143, 78, 0.18);
}

.guide-species-entry h3 {
    font-family: var(--header-font);
    font-size: 1.7rem;
    margin: 0 0 0.15rem;
    color: var(--guide-ink);
}

.guide-species-entry h3 a { color: inherit; text-decoration: none; }
.guide-species-entry h3 a:hover { color: var(--secondary-text-color); }

.guide-species-entry .sci {
    font-style: italic;
    color: var(--guide-sand);
    margin: 0 0 0.5rem;
}

/* ---- Guide-species info cards (images + sounds + text) ---------- */
.guide-info {
    margin-top: 1.75rem;
    display: grid;
    gap: 1.5rem;
}

.guide-info-card {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.5rem;
    background: #fff;
    border: 2px solid var(--guide-border);
    border-radius: 1.4rem;
    padding: 1.4rem;
    box-shadow: 0 6px 0 rgba(107, 143, 78, 0.18);
}

.guide-info-card__media {
    align-self: start;
    aspect-ratio: 1 / 1;
    border-radius: 1.1rem;
    overflow: hidden;
    background: var(--light-bg);
    border: 2px solid var(--guide-line);
}

.guide-info-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Non-monitored members (fish, butterfly): show the full illustration. */
.guide-info-card__media--full { background: #fff; }
.guide-info-card__media--full img { object-fit: contain; padding: 0.6rem; }

.guide-info-card__name {
    font-family: var(--header-font);
    font-size: 2rem;
    line-height: 1;
    margin: 0;
    color: var(--guide-ink);
}
.guide-info-card__name a { color: inherit; text-decoration: none; }
.guide-info-card__name a:hover { color: var(--secondary-text-color); }

.guide-info-card__sci {
    font-style: italic;
    color: var(--guide-sand);
    margin: 0.15rem 0 0.75rem;
}

.guide-info-card__desc { font-size: 1.15rem; line-height: 1.55; color: var(--earth-text); }
.guide-info-card__desc p { margin: 0 0 0.6rem; }

/* Sub-headings and property lists in the guide text (markdown). */
.guide-info-card__desc h3,
.guide-info-card__desc h4 {
    font-family: var(--header-font);
    font-size: 1.35rem;
    line-height: 1.1;
    margin: 1rem 0 0.4rem;
    color: var(--guide-ink);
}
.guide-info-card__desc ul { margin: 0 0 0.6rem; padding-left: 1.1rem; }
.guide-info-card__desc li { margin-bottom: 0.25rem; color: inherit; }

.guide-info-tip,
.guide-info-fact {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0.6rem 0 0;
    padding: 0.6rem 0.9rem;
    border-radius: 0.9rem;
    font-size: 1.05rem;
    line-height: 1.4;
}

.guide-info-tip { background: rgba(118, 191, 233, 0.16); }
.guide-info-tip i { color: var(--guide-blue); }
.guide-info-fact { background: rgba(246, 188, 69, 0.18); }
.guide-info-fact i { color: var(--guide-gold); }

/* Ecologist's habitat / monitoring block (from Mink). */
.guide-ecology {
    margin-top: 0.9rem;
    padding: 0.9rem 1.1rem;
    border: 2px solid var(--guide-border);
    border-radius: 1rem;
    background: rgba(132, 237, 125, 0.12);
}
.guide-ecology__value {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 0.4rem;
    font-size: 1.1rem;
    line-height: 1.4;
    color: var(--earth-text);
}
.guide-ecology__value i { color: var(--guide-green); }
.guide-ecology__title {
    font-family: var(--header-font);
    font-size: 1.15rem;
    color: var(--guide-ink);
    margin: 0.5rem 0 0.3rem;
}
.guide-ecology__title i { color: var(--guide-pink); }
.guide-ecology__steps { font-size: 1.05rem; line-height: 1.5; color: var(--earth-text); }
.guide-ecology__steps p { margin: 0 0 0.4rem; }

/* Occurrence chart (detections per month per guide species). */
.guide-chart {
    margin: 0 0 2rem;
    padding: 1.4rem 1.6rem;
    border: 2px solid var(--guide-border);
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 6px 0 rgba(107, 143, 78, 0.18);
}
.guide-chart__title {
    font-family: var(--header-font);
    font-size: 1.8rem;
    color: var(--guide-ink);
    margin: 0 0 0.15rem;
}
.guide-chart__sub { margin: 0 0 0.9rem; color: var(--earth-text); font-size: 1.05rem; }
.guide-chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-bottom: 0.9rem;
}
.guide-chart__key { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--earth-text); font-size: 1rem; }
.guide-chart__swatch {
    width: 0.9rem; height: 0.9rem;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 2px #fff;
}
.guide-chart__canvas { position: relative; height: 320px; }
.guide-chart__table { margin-top: 0.9rem; }
.guide-chart__table summary {
    cursor: pointer;
    color: var(--guide-pink);
    font-weight: 700;
    font-size: 1rem;
}
.guide-chart__table-wrap { overflow-x: auto; margin-top: 0.6rem; }
.guide-chart__table table { border-collapse: collapse; width: 100%; font-size: 0.98rem; }
.guide-chart__table th,
.guide-chart__table td {
    border: 1px solid var(--guide-line);
    padding: 0.3rem 0.6rem;
    text-align: right;
    color: var(--earth-text);
    font-variant-numeric: tabular-nums;
}
.guide-chart__table thead th,
.guide-chart__table tbody th { text-align: left; }

@media (max-width: 575px) {
    .guide-chart { padding: 1rem 1.1rem; }
    .guide-chart__canvas { height: 260px; }
}

.guide-info-sounds { margin-top: 1rem; }
.guide-info-sounds__title {
    font-family: var(--header-font);
    font-size: 1.25rem;
    color: var(--guide-ink);
    margin: 0 0 0.6rem;
}

.guide-info-sound { margin-bottom: 0.9rem; }
.guide-info-sound__label {
    display: inline-block;
    margin-bottom: 0.25rem;
    font-weight: 600;
    color: var(--guide-green);
    font-size: 0.95rem;
}

.guide-info-more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    font-weight: 700;
    color: var(--guide-pink);
    text-decoration: none;
}
.guide-info-more:hover { color: var(--secondary-text-color); gap: 0.6rem; }

@media (max-width: 600px) {
    .guide-info-card { grid-template-columns: 1fr; }
    .guide-info-card__media { max-width: 220px; }
}

/* ---- Carousel: side arrows + shorter cards --------------------- */
.guide-live-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.guide-live-row .home-carousel-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.guide-carousel-side {
    flex: none;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

/* Fixed-width cards so they stay readable in the narrow right column
   and scroll horizontally with the side arrows. */
.guide-carousel .home-bird-card { flex: 0 0 116px; }
.guide-carousel .home-carousel-track { gap: 14px; padding: 6px 2px 10px; }
.guide-carousel .home-bird-card-name { font-size: 0.95rem; }
.guide-carousel .home-bird-card-time,
.guide-carousel .home-bird-card-loc { font-size: 0.78rem; }

/* ---- Ecosystem web --------------------------------------------- */
.guide-web-section { margin-top: 2.5rem; }

.guide-web-title {
    font-family: var(--header-font);
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    color: var(--guide-ink);
    text-align: center;
    margin: 0;
}

.guide-web-sub {
    text-align: center;
    color: var(--earth-text);
    font-size: 1.1rem;
    max-width: 60ch;
    margin: 0.35rem auto 0.5rem;
}

.guide-web {
    position: relative;
    width: 100%;
    min-height: 520px;
}

.guide-web__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.guide-web__line { fill: none; stroke-linecap: round; }
/* Centre→guide lines are structural — one consistent style for all five. */
.guide-web__line.is-guide { stroke: var(--guide-gold); stroke-width: 3; opacity: 0.85; }
.guide-web__line.is-off { stroke: rgba(74, 56, 48, 0.16); stroke-width: 1.5; stroke-dasharray: 3 5; }
.guide-web__line.is-on { stroke: var(--guide-green); stroke-width: 3; }

.guide-web__node {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    text-decoration: none;
    color: var(--guide-ink);
    z-index: 1;
}

.guide-web__img {
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--guide-line);
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.guide-web__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: 0.55; transition: filter 0.2s, opacity 0.2s; }

/* Non-monitored members: fit the whole illustration inside the circle. */
.guide-web__node--full .guide-web__img { background: #fff; }
.guide-web__node--full .guide-web__img img { object-fit: contain; padding: 3px; }

.guide-web__name {
    font-size: 0.72rem;
    line-height: 1.05;
    text-align: center;
    max-width: 6rem;
    color: var(--guide-ink);
    white-space: nowrap;
    text-shadow: 0 1px 3px #fff, 0 -1px 3px #fff, 1px 0 3px #fff, -1px 0 3px #fff;
}

/* Centre emblem — the group's identity/"Why guide species?" hub. Deliberately
   NOT green: green means "heard recently" in the legend, so a green centre read
   as a status. Uses the brand pink (same as the map marker) instead. */
.guide-web__node--center { z-index: 3; }
.guide-web__node--center .guide-web__img {
    width: 5rem; height: 5rem;
    background: var(--guide-pink);
    border-color: #fff;
    color: #fff;
    font-size: 1.6rem;
    box-shadow: 0 6px 18px rgba(224, 95, 168, 0.35);
}
.guide-web__node--center .guide-web__name {
    font-family: var(--header-font);
    font-size: 1rem;
    color: var(--guide-ink);
    max-width: 8rem;
}

/* Guide nodes: bigger, gold rimmed */
.guide-web__node--guide { z-index: 2; }
.guide-web__node--guide .guide-web__img {
    width: 4rem; height: 4rem;
    border-color: var(--guide-gold);
    border-width: 3px;
    box-shadow: 0 4px 12px rgba(74, 56, 48, 0.18);
}
/* Guide nodes grey out until the species has been heard (like stepping stones);
   full colour once heard. */
.guide-web__node--guide.is-seen .guide-web__img img { filter: none; opacity: 1; }
.guide-web__node--guide:not(.is-seen) .guide-web__img { border-color: var(--guide-line); }
.guide-web__node--guide .guide-web__name { color: var(--guide-ink); font-weight: 700; max-width: 6.5rem; }

/* Stepping-stone nodes: no label until hovered, to keep the web readable. */
.guide-web__node--support .guide-web__img { width: 2.8rem; height: 2.8rem; }
.guide-web__node--support.is-seen .guide-web__img { border-color: var(--guide-green); box-shadow: 0 3px 9px rgba(79, 175, 87, 0.28); }
.guide-web__node--support.is-seen .guide-web__img img { filter: none; opacity: 1; }

.guide-web__node--support .guide-web__name {
    position: absolute;
    top: 100%;
    margin-top: 0.15rem;
    display: none;
}
.guide-web__node--support:hover { z-index: 5; }
.guide-web__node--support:hover .guide-web__name { display: block; }

.guide-web__node[href]:hover .guide-web__img { transform: scale(1.12); }

/* Live pulse */
.guide-web__node.is-live .guide-web__img {
    border-color: var(--guide-green);
    animation: guide-pulse 2s infinite;
}

.guide-web-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 0.75rem;
    color: var(--earth-text);
    font-size: 0.95rem;
}

.guide-web-key {
    display: inline-block;
    width: 0.9rem; height: 0.9rem;
    border-radius: 50%;
    margin-right: 0.35rem;
    vertical-align: -1px;
}
.guide-web-key--guide { background: var(--guide-gold); }
.guide-web-key--seen { background: var(--guide-green); }
.guide-web-key--quiet { background: #fff; border: 2px solid var(--guide-line); }

/* Guide-group entry point in the location nav. */
.guide-nav-link {
    font-weight: 600;
    color: #2f7d32;
}

.guide-nav-link:hover { color: #1b5e20; }

@media (max-width: 900px) {
    .guide-dash {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-template-areas:
            "why"
            "web"
            "carousel"
            "map";
    }
    .guide-dash .guide-locale { flex-direction: column; }
    .guide-dash .guide-locale > * { min-height: 240px; }
    .guide-web { min-height: 460px; }
}

@media (max-width: 575px) {
    .guide-why { flex-direction: column; gap: 0.75rem; }
    .guide-card__lead { flex-direction: column; align-items: flex-start; text-align: left; }
    .guide-sticker__img { width: 80px; }
}

@media (prefers-reduced-motion: reduce) {
    .guide-pulse-badge__dot,
    .guide-card.is-live .guide-card__live-ring,
    .guide-stone.is-live .guide-stone__ring,
    .guide-carousel .home-bird-card.guide-hit--guide,
    .guide-hit-card__photo,
    .guide-web__node.is-live .guide-web__img { animation: none; }
}
/* === End guide species hub ===================================== */

/* === Navbar on one line, with one search field ===================
   Locations is a plain link now that searching lives in the field, the
   links are smaller and closer, and between 992 and 1200px the lettering
   and the user's name give way before anything wraps. */
.navbar-search-link {
    display: none;
    color: var(--earth-text);
    padding: 0.4rem;
    margin-left: auto;
    position: relative;
    z-index: 1;
}
.navbar-search-link .wil-ic,
.navbar-search__button .wil-ic { width: 20px; height: 20px; }

.navbar-search {
    position: relative;
    z-index: 1;
}
.navbar-search__form {
    display: flex;
    height: 44px;
    background: #fff;
    border: 3px solid var(--secondary-color);
    border-radius: 4px;
    overflow: hidden;
}
.navbar-search__input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0 10px;
    font-family: var(--body-font);
    font-size: 1.1rem;
    color: var(--earth-text);
}
.navbar-search__input:focus { outline: none; }
.navbar-search__form:focus-within { box-shadow: 0 0 0 0.2rem rgba(255, 109, 195, 0.3); }
.navbar-search__input::-webkit-search-cancel-button { display: none; }
.navbar-search__button {
    flex: 0 0 42px;
    border: none;
    background: var(--secondary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.navbar-search__button:hover { background: #ff4db8; }

.navbar-search__suggestions {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: max(100%, 380px);
    max-height: 70vh;
    overflow-y: auto;
    background: #fff;
    border: 4px solid var(--secondary-color);
    box-shadow: 0 10px 24px rgba(97, 67, 58, 0.18);
    border-radius: 6px;
    padding: 6px 0;
    z-index: 3000;
}
.navbar-search__group {
    padding: 8px 16px 2px;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--earth-text);
}
.navbar-search__option,
.navbar-search__all {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 6px 16px;
    font-size: 1.2rem;
    line-height: 1.25;
    color: var(--secondary-text-color);
    text-decoration: none;
}
.navbar-search__option:hover,
.navbar-search__option[aria-selected="true"],
.navbar-search__all:hover,
.navbar-search__all[aria-selected="true"] {
    background: #fdf0f8;
    color: var(--secondary-text-color);
}
.navbar-search__name { flex: 1 1 auto; }
.navbar-search__meta { font-size: 0.9rem; color: var(--earth-text); }
.navbar-search__all {
    border-top: 2px solid rgba(255, 109, 195, 0.35);
    margin: 6px 16px 0;
    padding: 8px 0 4px;
    font-size: 1.1rem;
}
.navbar-search__empty { padding: 8px 16px; font-size: 1.1rem; }

@media (min-width: 992px) {
    .main-nav .logo-container { margin-right: 16px; flex-shrink: 0; }
    .main-nav .luistervink-logo-img { height: 46px; }
    .main-nav .luistervink-text-logo-img { height: 34px; min-width: 0; }
    .main-nav .navbar-collapse { align-items: center; gap: 16px; min-width: 0; }
    .main-nav .nav {
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: auto;
        flex-shrink: 0;
    }
    .main-nav .nav-link {
        padding: 8px 9px;
        font-size: 1.3rem;
        white-space: nowrap;
    }
    .main-nav .navbar-search { flex: 0 1 280px; min-width: 220px; margin-left: auto; }
    .main-nav .nav { margin-left: 4px; }
    .main-nav .navbar-user { margin-left: 16px !important; flex-shrink: 0; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .main-nav .navbar-user-name { display: none; }
}

@media (max-width: 991.98px) {
    .navbar-search-link { display: block; }
    .navbar-search-link + .navbar-toggler { margin-left: 4px; }
    .main-nav .navbar-search { margin-bottom: 0.75rem; }
    .main-nav .navbar-search__suggestions { position: static; width: 100%; margin-top: 6px; box-shadow: none; }
}
/* === End navbar ================================================== */

/* === Location list, site search and Wilder Insights Lab pages ==== */
.lv-page {
    max-width: 1120px;
    margin: 0 auto 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.lv-page__lead { margin: 0; text-align: center; font-size: 1.4rem; }
.lv-page__contact { margin: 0; text-align: center; }

.lv-panel {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.1rem 1.25rem;
    background: rgba(255, 255, 255, 0.92);
    border: 4px solid var(--secondary-color);
    border-radius: 6px;
}

.lv-search { display: flex; }
.lv-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 52px;
    padding: 0 16px;
    border: 2px solid var(--secondary-color);
    border-right: none;
    border-radius: 4px 0 0 4px;
    background: #fff;
    font-family: var(--body-font);
    font-size: 1.35rem;
    color: var(--earth-text);
}
.lv-search__input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--secondary-color); }
.lv-search__button {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 24px;
    border: none;
    border-radius: 0 4px 4px 0;
    background: var(--secondary-color);
    color: #fff;
    font-family: var(--body-font);
    font-size: 1.35rem;
}
.lv-search__button:hover { background: #ff4db8; }

.lv-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 1.15rem; }
.lv-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    background: rgba(132, 237, 125, 0.35);
    border: 2px solid var(--primary-color);
    border-radius: 999px;
    color: var(--earth-text);
    text-decoration: none;
    white-space: nowrap;
}
a.lv-chip:hover { background: rgba(132, 237, 125, 0.6); color: var(--earth-text); }
.lv-chip__count { font-size: 0.95rem; color: var(--secondary-text-color); }
.lv-chip--current { background: var(--secondary-color); border-color: var(--secondary-color); color: #fff; }
.lv-chip--current .lv-chip__count { color: #fff; }
.lv-chip--empty { background: transparent; border-color: var(--border-color); color: #8a7670; }
.lv-chip--empty .lv-chip__count { color: #8a7670; }
.lv-chips__clear { margin-left: auto; font-size: 1.05rem; color: var(--secondary-text-color); }

.lv-group {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.9);
    border: 4px solid var(--secondary-color);
    border-radius: 6px;
    overflow: hidden;
    scroll-margin-top: 1rem;
}
.lv-group__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 12px 20px;
    background: rgba(132, 237, 125, 0.45);
}
.lv-group__icon { width: 52px; height: 52px; object-fit: contain; }
.lv-group__title {
    margin: 0;
    flex: 1 1 auto;
    font-family: var(--header-font);
    font-size: 2.4rem;
    line-height: 1;
    font-weight: 400;
    color: var(--secondary-text-color);
}
.lv-group__count { font-size: 1.15rem; }
.lv-group__link { font-size: 1.15rem; color: var(--secondary-text-color); }

.lv-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 20px;
}
.lv-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 10px 12px;
    background: #fff;
    border: 2px solid var(--secondary-color);
    border-radius: 4px;
    color: var(--secondary-text-color);
    text-decoration: none;
}
.lv-tile:hover { background: #fdf0f8; color: var(--secondary-text-color); }
.lv-tile__img { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }
.lv-tile__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lv-tile__name { font-size: 1.25rem; line-height: 1.15; overflow-wrap: break-word; hyphens: auto; min-width: 0; }
.lv-tile__meta { font-size: 1rem; line-height: 1.2; color: var(--earth-text); }
.lv-page mark { background: var(--yellow-color); color: var(--earth-text); padding: 0 2px; }

.lv-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 20px;
    background: var(--secondary-color);
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
    font-size: 1.25rem;
    white-space: nowrap;
}
.lv-button:hover { background: #ff4db8; color: #fff; }
.lv-button--green { background: var(--primary-color); color: var(--earth-text); }
.lv-button--green:hover { background: #6fdc68; color: var(--earth-text); }
.lv-button .wil-ic { width: 18px; height: 18px; }

.lv-partners { list-style: none; margin: 0; padding: 8px 20px; }
.lv-partner {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 0;
    font-size: 1.2rem;
}
.lv-partner + .lv-partner { border-top: 2px dashed rgba(255, 109, 195, 0.4); }
.lv-partner__img { width: 56px; height: auto; }
.lv-partner__text { flex: 1 1 auto; }
.lv-partner__name { font-weight: 400; color: var(--secondary-text-color); margin-right: 6px; }

.lv-empty {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 2rem 2.25rem;
    background: rgba(255, 255, 255, 0.95);
    border: 4px solid var(--secondary-color);
    border-radius: 6px;
}
.lv-empty__img { width: 150px; height: 150px; object-fit: contain; flex-shrink: 0; }
.lv-empty__title {
    margin: 0 0 0.5rem;
    font-family: var(--header-font);
    font-size: 2.3rem;
    font-weight: 400;
    color: var(--secondary-text-color);
}
.lv-empty__text p { margin: 0; font-size: 1.3rem; }
.lv-empty__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1rem; }

.lv-wil { display: flex; align-items: center; gap: 48px; padding: 28px 32px; }
.lv-wil__text { flex: 1 1 auto; font-size: 1.35rem; line-height: 1.45; }
.lv-wil__text p:last-child { margin-bottom: 0; }
.lv-wil__logo { width: 300px; height: auto; flex-shrink: 0; }

.lv-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.lv-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 28px;
    background: #fff;
    border: 4px solid var(--secondary-color);
    border-radius: 6px;
    color: var(--earth-text);
    text-decoration: none;
}
.lv-card:hover { background: #fdf0f8; color: var(--earth-text); }
.lv-card__kicker { font-size: 1.1rem; color: var(--secondary-text-color); }
.lv-card__title { font-family: var(--header-font); font-size: 2.2rem; line-height: 1.05; color: var(--secondary-text-color); }
.lv-card__text { flex: 1 1 auto; font-size: 1.3rem; line-height: 1.35; }
.lv-card .lv-button { align-self: flex-start; }

@media (max-width: 991.98px) {
    .lv-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lv-wil { flex-direction: column-reverse; align-items: flex-start; gap: 20px; }
    .lv-wil__logo { width: 220px; }
}
@media (max-width: 767.98px) {
    .lv-page { gap: 1rem; }
    .lv-panel { padding: 0.75rem; border-width: 3px; }
    .lv-search__input, .lv-search__button { height: 48px; font-size: 1.2rem; }
    .lv-search__button span { display: none; }
    .lv-search__button { padding: 0 14px; }
    .lv-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -0.75rem; padding: 0 0.75rem; scrollbar-width: none; }
    .lv-chips__clear { white-space: nowrap; }
    .lv-group { border-width: 3px; }
    .lv-group__header { padding: 10px 12px; gap: 10px; }
    .lv-group__icon { width: 40px; height: 40px; }
    .lv-group__title { font-size: 1.75rem; }
    .lv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; }
    .lv-tile { min-height: 56px; padding: 6px 8px; gap: 8px; }
    .lv-tile__img { width: 36px; height: 36px; }
    .lv-tile__name { font-size: 1.05rem; }
    .lv-partner { flex-wrap: wrap; }
    .lv-empty { flex-direction: column; align-items: flex-start; padding: 1.25rem; gap: 16px; }
    .lv-empty__img { width: 90px; height: 90px; }
    .lv-cards { grid-template-columns: 1fr; }
    .lv-wil { padding: 16px; }
    .lv-wil__text { font-size: 1.2rem; }
}
/* === End location list, site search and WIL pages ================ */

/* --- The way to the live site of Wilder Insights Lab, for more depth ---
   Its forest green (--wil-forest on the live pages) marks it as the other,
   more serious site. */

/* On the "Just heard" carousel, top-right, as the title is top-left. */
.home-carousel-deeper {
    position: absolute;
    top: 14px;
    right: 24px;
    z-index: 4;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #1F2A24;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(31, 42, 36, 0.15);
}
.home-carousel-deeper:hover {
    background: #1F2A24;
    color: #fff;
}

/* On a location's page, at the right of its title bar. */
.location-deeper {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 14px;
    border: 2px solid #1F2A24;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.85);
    color: #1F2A24;
    line-height: 1.2;
    text-decoration: none;
}
.location-deeper:hover {
    background: #1F2A24;
    color: #fff;
}
.location-deeper__label {
    font-weight: 700;
}
.location-deeper__label .icon,
.location-deeper__label svg {
    width: 0.9em;
    height: 0.9em;
    vertical-align: -0.05em;
}
.location-deeper__sub {
    font-size: 0.75rem;
    opacity: 0.8;
}

@media (max-width: 991.98px) {
    /* Under the title instead: beside it the name has no room. */
    .location-deeper {
        position: static;
        transform: none;
        flex-direction: row;
        gap: 6px;
        width: fit-content;
        margin: 24px auto 8px;
        padding: 4px 12px;
    }
}

@media (max-width: 575.98px) {
    .location-deeper {
        margin-top: 20px;
        padding: 3px 10px;
        font-size: 0.85rem;
    }
    .location-deeper__sub {
        font-size: 0.7rem;
    }
}

@media (max-width: 767.98px) {
    .home-carousel-deeper {
        top: 10px;
        right: 12px;
        padding: 3px 10px;
        font-size: 0.8rem;
    }
}