/* Custom touches on top of Bootstrap 5 */
body { font-family: Tahoma, 'Vazirmatn', sans-serif; }

.site-navbar {
    background: #2e5339;
    padding-top: 16px;
    padding-bottom: 16px;
}
.site-navbar .navbar-brand,
.site-navbar .nav-link {
    color: #eaf3ea !important;
}
.site-navbar .nav-link:hover {
    color: #fff !important;
}
.site-navbar--tall { padding-top: 20px; padding-bottom: 20px; }

/* Panel/admin get their own header color so they're visually distinct from the public site */
.panel-navbar { background: #1f3f6b; }
.admin-navbar { background: #5c2e2e; }
[data-bs-theme="dark"] .panel-navbar { background: #16294a; }
[data-bs-theme="dark"] .admin-navbar { background: #3d1f1f; }

.attraction-card {
    transition: transform .15s ease, box-shadow .15s ease;
}
.attraction-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,.08) !important;
}

.province-card {
    background: var(--bs-body-bg);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    border: 2px solid transparent !important;
}
.province-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,.08) !important;
}
.province-card.active {
    border-color: #2e5339 !important;
    background: rgba(46, 83, 57, .06);
}

#calendar-tabs .nav-link {
    border: none;
    background: var(--bs-body-bg);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    margin-inline-end: 6px;
}
#calendar-tabs .nav-link.active {
    background: #2e5339;
    color: #fff;
}

/* AQI "unhealthy" tier - Bootstrap has no default orange badge */
.bg-orange {
    background-color: #fd7e14 !important;
    color: #fff;
}

[data-bs-theme="dark"] .site-navbar {
    background: #1c3322;
}

/* ===================== Illustrated weather hero ===================== */
.weather-hero {
    border-radius: 28px;
    padding: 28px 24px 0;
    color: #fff;
    position: relative;
    overflow: hidden;
    min-height: 320px;
    display: flex;
    flex-direction: column;
}
.weather-hero--compact { min-height: 220px; padding: 20px 18px 0; border-radius: 20px; }

.weather-theme--sunny  { background: linear-gradient(160deg, #ffd9a0 0%, #ffb27a 45%, #ff8f70 100%); }
.weather-theme--cloudy { background: linear-gradient(160deg, #c9d6e3 0%, #93a9c2 55%, #6e84a3 100%); }
.weather-theme--rainy  { background: linear-gradient(160deg, #6a85a8 0%, #4a638a 55%, #33456b 100%); }
.weather-theme--storm  { background: linear-gradient(160deg, #4b5b7a 0%, #313d5c 55%, #1e2540 100%); }
.weather-theme--snowy  { background: linear-gradient(160deg, #dfe9f3 0%, #b9cbe0 55%, #93a9c9 100%); }
.weather-theme--night  { background: linear-gradient(160deg, #2b2f6b 0%, #1c1f4a 55%, #0f1130 100%); }

.weather-hero .hero-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    z-index: 2;
    position: relative;
}
.weather-hero .hero-icon {
    font-size: 2.2rem;
    opacity: .9;
}
.weather-hero .hero-temp {
    font-size: 5rem;
    font-weight: 800;
    line-height: 1;
    margin-top: 6px;
    z-index: 2;
    position: relative;
}
.weather-hero .hero-temp small { font-size: 2rem; vertical-align: top; }
.weather-hero .hero-desc {
    font-size: 1rem;
    opacity: .9;
    z-index: 2;
    position: relative;
}
.weather-hero .hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    z-index: 2;
    position: relative;
}
.weather-hero .hero-chip {
    background: rgba(255,255,255,.25);
    backdrop-filter: blur(2px);
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: .82rem;
    white-space: nowrap;
}
.weather-hero .hero-chip--badge {
    background: none; /* let the bg-* Bootstrap class supply the AQI color */
    font-weight: 600;
}
.weather-hero .hero-hills {
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    opacity: .55;
    background: radial-gradient(ellipse at 30% 100%, rgba(255,255,255,.35), transparent 60%),
                radial-gradient(ellipse at 75% 100%, rgba(255,255,255,.2), transparent 55%);
}

.weather-sheet {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-radius: 22px;
    margin-top: 18px;
    padding: 18px;
    box-shadow: 0 -6px 24px rgba(0,0,0,.08);
}
.weather-sheet .hourly-strip {
    display: flex;
    overflow-x: auto;
    gap: 14px;
    padding-bottom: 4px;
}
.weather-sheet .hourly-item {
    text-align: center;
    min-width: 56px;
    font-size: .85rem;
    color: var(--bs-secondary-color);
}
.weather-sheet .hourly-item .hourly-icon { font-size: 1.3rem; color: #f0b429; }
.weather-sheet .hourly-item .hourly-temp { font-weight: bold; color: var(--bs-body-color); margin-top: 2px; }

.weather-daily-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 4px;
    border-top: 1px solid var(--bs-border-color);
    font-size: .9rem;
}
.weather-daily-row:first-child { border-top: none; }

/* ===================== Bottom mobile nav ===================== */
.bottom-nav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    background: var(--bs-body-bg);
    box-shadow: 0 -2px 12px rgba(0,0,0,.08);
    display: flex;
    justify-content: space-around;
    /* Extra bottom padding (beyond the safe-area inset) so the tap targets
       sit clear of the iOS home-indicator / Android gesture bar instead of
       being crammed right against the screen edge. */
    padding: 8px 4px calc(14px + env(safe-area-inset-bottom));
    z-index: 1030;
}
.bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--bs-secondary-color);
    text-decoration: none;
    font-size: .7rem;
    flex: 1;
    min-height: 44px; /* comfortable tap target size */
    padding: 4px 0;
}
.bottom-nav a i { font-size: 1.35rem; }
.bottom-nav a.active { color: #2e5339; }
[data-bs-theme="dark"] .bottom-nav a.active { color: #6fbf83; }
.panel-navbar ~ main ~ .bottom-nav a.active,
.admin-navbar ~ main ~ .bottom-nav a.active { color: inherit; }
body.has-bottom-nav { padding-bottom: 84px; }
@media (max-width: 991.98px) {
    body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* ===================== Loading skeletons (prevent layout shift) =====================
   Applied to elements that start with placeholder text and get their real
   content filled in-place once data arrives - the element/container never
   changes size or gets shown/hidden, so nothing around it reflows. */
.sk {
    display: inline-block;
    color: transparent !important;
    background: rgba(127, 127, 127, .35);
    border-radius: 5px;
    animation: sk-pulse 1.4s ease-in-out infinite;
}
.sk-icon {
    opacity: .35;
    animation: sk-pulse 1.4s ease-in-out infinite;
}
@keyframes sk-pulse {
    0%, 100% { opacity: .45; }
    50% { opacity: .9; }
}
.weather-hero.sk-active .hero-hills { opacity: .25; }

/* Rich text content rendered from the Quill editor */
.rich-content ul, .rich-content ol { padding-inline-start: 24px; }
.rich-content blockquote {
    border-inline-start: 4px solid #2e5339;
    padding-inline-start: 12px;
    color: var(--bs-secondary-color);
    margin: 12px 0;
}
.rich-content a { color: #2e5339; }

/* Quill editor readability in dark mode */
[data-bs-theme="dark"] .ql-snow .ql-stroke { stroke: #ccc; }
[data-bs-theme="dark"] .ql-snow .ql-picker { color: #ccc; }
[data-bs-theme="dark"] #description-editor { color: #eee; }

/* ===================== Global page-loading overlay ===================== */
#page-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, .85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}
#page-loading-overlay.show {
    opacity: 1;
    pointer-events: all;
}
[data-bs-theme="dark"] #page-loading-overlay {
    background: rgba(15, 20, 17, .85);
}
.page-loading-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.page-loading-text {
    font-size: .95rem;
    color: var(--bs-body-color);
}

/* ===================== Offline banner ===================== */
#offline-banner {
    position: fixed;
    top: 0;
    inset-inline: 0;
    background: #a33;
    color: #fff;
    text-align: center;
    padding: 8px 12px;
    font-size: .85rem;
    z-index: 2100;
    transform: translateY(-100%);
    transition: transform .2s ease;
}
#offline-banner.show {
    transform: translateY(0);
}

/* ===================== Instagram-style video grid ===================== */
.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}
@media (min-width: 768px) {
    .video-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
}
.video-grid-item {
    position: relative;
    aspect-ratio: 9 / 16;
    background: #000;
    border-radius: 6px;
    overflow: hidden;
    display: block;
}
.video-grid-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.video-grid-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(to top, rgba(0,0,0,.55), transparent 40%);
    color: #fff;
    opacity: 0;
    transition: opacity .15s ease;
}
.video-grid-item:hover .video-grid-overlay,
.video-grid-item:focus .video-grid-overlay {
    opacity: 1;
}
.video-grid-overlay i { font-size: 2rem; }
.video-grid-title {
    position: absolute;
    bottom: 8px;
    inset-inline: 8px;
    font-size: .75rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===================== Header avatar dropdown ===================== */
.avatar-dropdown img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.5);
}
.avatar-dropdown .dropdown-toggle::after { display: none; }