/* sun-shared.css — Shared styles for sun pages (zachod, wschod, wschod-zachod, dlugosc-dnia)
 * Unified prefix: sun- (replaces per-page zs-/ws-/wz-/dl- for shared components)
 * Page-unique styles remain inline with original prefix.
 */

/* ─── Page wrapper ─────────────────────────────────────────────── */
.sun-page {
    --sun-accent: #d35400;
    max-width: 900px;
    margin: 0 auto;
}

.sun-page--wschod {
    --sun-accent: #e67e22;
}

/* ─── Comparison ───────────────────────────────────────────────── */
.sun-comparison {
    background: var(--table-header-bg, #f5f5f5);
    border-left: 4px solid var(--accent-primary, #FFA901);
    padding: 1rem 1.5rem;
    border-radius: 0 8px 8px 0;
    margin-bottom: 2rem;
}

.sun-comparison__main {
    font-size: 1.1rem;
    margin: 0 0 0.5rem 0;
    color: var(--text-primary, #464646);
}

.sun-comparison__delta {
    font-size: 0.95rem;
    margin: 0;
    color: var(--text-muted, #777);
}

.sun-comparison__delta--increase { color: #2e7d32; }
.sun-comparison__delta--decrease { color: #c62828; }

/* ─── Forecast table ───────────────────────────────────────────── */
.sun-forecast { margin-bottom: 2rem; }

.sun-forecast__table-wrap {
    overflow-x: auto;
}

.sun-forecast__table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-white, white);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.sun-forecast__table thead {
    background: var(--yrcal-month-header-bg, linear-gradient(to bottom, #ffcc6a 0%, #ffa901 100%));
    color: var(--text-heading, #774400);
}

.sun-forecast__table th,
.sun-forecast__table td {
    padding: 0.6rem 0.8rem;
    text-align: center;
    border-bottom: 1px solid var(--border-subtle, #ddd);
}

.sun-forecast__date {
    text-align: left;
}

.sun-forecast__weekday {
    display: inline-block;
    width: 25px;
    color: var(--text-muted, #777);
    font-size: 0.85rem;
}

.sun-forecast__badge {
    background: var(--accent-primary, #FFA901);
    color: var(--text-heading, #774400);
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 0.5rem;
    text-transform: uppercase;
}

.sun-forecast__time {
    font-family: 'Courier New', monospace;
}

.sun-forecast__length {
    font-family: 'Courier New', monospace;
    color: var(--text-heading, #774400);
}

.sun-forecast__row--today {
    background: var(--moon-today-bg, #fff9e6);
}

.sun-forecast__row--weekend {
    background: #fff8e1;
}

.sun-forecast__row--today.sun-forecast__row--weekend {
    background: var(--moon-today-bg, #fff9e6);
}

/* ─── Delta indicators ─────────────────────────────────────────── */
.sun-delta--increase { color: #2e7d32; }
.sun-delta--increase::before { content: '\2191 '; }
.sun-delta--decrease { color: #c62828; }
.sun-delta--decrease::before { content: '\2193 '; }
.sun-delta--none { color: var(--text-muted, #9e9e9e); }

/* ─── City search autocomplete ────────────────────────────────── */
.sun-city-search {
    position: relative;
    max-width: 400px;
    margin-bottom: 1rem;
}

.sun-city-search__input {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border-medium, #ccc);
    border-radius: 6px;
    font-size: 0.95rem;
    background: var(--bg-white, #fff);
    color: var(--text-primary, #464646);
    box-sizing: border-box;
}

.sun-city-search__input:focus {
    outline: none;
    border-color: var(--accent-primary, #FFA901);
    box-shadow: 0 0 0 2px rgba(255, 169, 1, 0.2);
}

.sun-city-search__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-white, #fff);
    border: 1px solid var(--border-subtle, #ddd);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 20;
    max-height: 300px;
    overflow-y: auto;
}

.sun-city-search__item {
    padding: 0.5rem 0.8rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-primary, #464646);
}

.sun-city-search__item:hover,
.sun-city-search__item--active {
    background: var(--moon-today-bg, #fff9e6);
}

/* ─── Cities grid ──────────────────────────────────────────────── */
.sun-cities { margin-bottom: 2rem; }
.sun-cities__intro { color: var(--text-muted, #777); margin-bottom: 1rem; }

.sun-cities__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.sun-cities__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: var(--yrcal-cell-bg, #fff);
    border: 1px solid var(--border-subtle, #ddd);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}

.sun-cities__card:hover {
    background: var(--moon-today-bg, #fff9e6);
    border-color: var(--accent-primary, #FFA901);
    transform: translateY(-2px);
    text-decoration: none;
}

.sun-cities__name {
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--text-primary, #464646);
}

/* ─── Monthly calendar ─────────────────────────────────────────── */
.sun-monthly { margin-bottom: 2rem; }
.sun-monthly__intro { color: var(--text-muted, #777); margin-bottom: 1rem; }
.sun-monthly__table-wrap { overflow-x: auto; }

.sun-monthly__table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-white, white);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    table-layout: fixed;
}

.sun-monthly__table thead {
    background: var(--yrcal-month-header-bg, linear-gradient(to bottom, #ffcc6a 0%, #ffa901 100%));
    color: var(--text-heading, #774400);
}

.sun-monthly__table th,
.sun-monthly__table td {
    padding: 0.6rem 0.4rem;
    text-align: center;
    border-bottom: 1px solid var(--border-subtle, #ddd);
}

.sun-monthly__weekend { background: #fff8e1 !important; }
.sun-monthly__empty { background: var(--table-header-bg, #f5f5f5); }

.sun-monthly__day {
    vertical-align: top;
    padding: 0.5rem !important;
}

.sun-monthly__day--today {
    background: var(--moon-today-bg, #fff9e6) !important;
    font-weight: 600;
}

.sun-monthly__day--weekend {
    background: #fff8e1;
}

.sun-monthly__daynum {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted, #777);
}

.sun-monthly__time {
    display: block;
    font-size: 0.95rem;
    font-family: 'Courier New', monospace;
    color: var(--text-heading, #774400);
}

/* WZ/DL monthly: slightly smaller for day_length values */
.sun-monthly--compact .sun-monthly__day {
    padding: 0.4rem !important;
    cursor: help;
}

.sun-monthly--compact .sun-monthly__daynum {
    font-size: 0.8rem;
}

.sun-monthly--compact .sun-monthly__time {
    font-size: 0.8rem;
}

/* ─── Annual chart (base) ──────────────────────────────────────── */
.sun-annual { margin-bottom: 2rem; }
.sun-annual__intro { color: var(--text-muted, #777); margin-bottom: 1rem; }
.sun-annual__chart-wrap { overflow-x: auto; }

.sun-annual__svg {
    width: 100%;
    height: auto;
    display: block;
}

.sun-annual__grid {
    stroke: var(--border-subtle, #ddd);
    stroke-width: 1;
}

.sun-annual__label-y {
    fill: var(--text-muted, #777);
    font-size: 12px;
    text-anchor: end;
    font-family: 'Courier New', monospace;
}

.sun-annual__label-x {
    fill: var(--text-muted, #777);
    font-size: 11px;
    text-anchor: middle;
}

.sun-annual__solstice {
    stroke: var(--text-muted, #999);
    stroke-width: 1;
    stroke-dasharray: 6 4;
}

.sun-annual__solstice-label {
    fill: var(--text-muted, #999);
    font-size: 10px;
}

.sun-annual__note {
    margin: 0.75rem 0 0 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-muted, #777);
}

.sun-annual__hit-area {
    fill: transparent;
    cursor: crosshair;
}

.sun-annual__hover-line {
    stroke: var(--text-muted, #999);
    stroke-width: 1;
    stroke-dasharray: 4 3;
}

.sun-annual__hover-bg {
    fill: var(--yrcal-cell-bg, #fff);
    stroke: var(--border-subtle, #ddd);
    stroke-width: 1;
}

/* ─── Annual: single-line variant (ZS, WS) ─────────────────────── */
.sun-annual--single .sun-annual__line {
    fill: none;
    stroke: var(--accent-primary, #FFA901);
    stroke-width: 2.5;
    stroke-linejoin: round;
}

.sun-annual--single .sun-annual__today-dot {
    fill: var(--sun-accent);
    stroke: var(--bg-white, white);
    stroke-width: 2;
}

.sun-annual--single .sun-annual__today-label {
    fill: var(--sun-accent);
    font-size: 13px;
    font-weight: 700;
    text-anchor: middle;
    font-family: 'Courier New', monospace;
}

.sun-annual--single .sun-annual__extreme-dot {
    stroke: var(--bg-white, white);
    stroke-width: 2;
}

.sun-annual--single .sun-annual__extreme-dot--min {
    fill: #c62828;
}

.sun-annual--single .sun-annual__extreme-dot--max {
    fill: #2e7d32;
}

.sun-annual--single .sun-annual__extreme-label {
    font-size: 12px;
    font-weight: 700;
    text-anchor: middle;
    font-family: 'Courier New', monospace;
    fill: var(--text-primary, #464646);
}

.sun-annual--single .sun-annual__extreme-date {
    font-size: 10px;
    text-anchor: middle;
    fill: var(--text-muted, #777);
}

.sun-annual--single .sun-annual__hover-dot {
    fill: var(--accent-primary, #FFA901);
    stroke: var(--bg-white, white);
    stroke-width: 2;
}

.sun-annual--single .sun-annual__hover-time {
    fill: var(--text-heading, #774400);
    font-size: 13px;
    font-weight: 700;
    text-anchor: middle;
    font-family: 'Courier New', monospace;
}

.sun-annual--single .sun-annual__hover-date {
    fill: var(--text-muted, #777);
    font-size: 10px;
    text-anchor: middle;
}

/* WS: swap min/max dot colors (earliest=green, latest=red) */
.sun-annual--single-sunrise .sun-annual__extreme-dot--min {
    fill: #2e7d32;
}

.sun-annual--single-sunrise .sun-annual__extreme-dot--max {
    fill: #c62828;
}

/* ─── Annual: dual-line variant (WZ, DL) ────────────────────────── */
.sun-annual--dual .sun-annual__fill {
    fill: rgba(255, 169, 1, 0.12);
}

.sun-annual--dual .sun-annual__line {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
}

.sun-annual--dual .sun-annual__line--sunrise { stroke: #e67e22; }
.sun-annual--dual .sun-annual__line--sunset { stroke: #FFA901; }

.sun-annual--dual .sun-annual__dot {
    stroke: var(--bg-white, white);
    stroke-width: 2;
}

.sun-annual--dual .sun-annual__dot--sr-min { fill: #2e7d32; }
.sun-annual--dual .sun-annual__dot--sr-max { fill: #c62828; }
.sun-annual--dual .sun-annual__dot--ss-min { fill: #c62828; }
.sun-annual--dual .sun-annual__dot--ss-max { fill: #2e7d32; }

.sun-annual--dual .sun-annual__marker-label {
    font-size: 10px;
    font-weight: 700;
    text-anchor: middle;
    font-family: 'Courier New', monospace;
    fill: var(--text-primary, #464646);
}

.sun-annual--dual .sun-annual__today-line {
    stroke: var(--sunset-accent, #d35400);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
}

.sun-annual--dual .sun-annual__today-dot {
    stroke: var(--bg-white, white);
    stroke-width: 2;
}

.sun-annual--dual .sun-annual__today-dot--sr { fill: #e67e22; }
.sun-annual--dual .sun-annual__today-dot--ss { fill: #FFA901; }

.sun-annual--dual .sun-annual__hover-dot--sr { fill: #e67e22; stroke: white; stroke-width: 2; }
.sun-annual--dual .sun-annual__hover-dot--ss { fill: #FFA901; stroke: white; stroke-width: 2; }

.sun-annual--dual .sun-annual__hover-text1 {
    fill: var(--text-muted, #777);
    font-size: 10px;
    text-anchor: middle;
}

.sun-annual--dual .sun-annual__hover-text2 {
    fill: var(--text-heading, #774400);
    font-size: 12px;
    font-weight: 700;
    text-anchor: middle;
    font-family: 'Courier New', monospace;
}

.sun-annual--dual .sun-annual__hover-text3 {
    fill: var(--text-muted, #777);
    font-size: 10px;
    text-anchor: middle;
}

/* ─── FAQ ──────────────────────────────────────────────────────── */
.sun-faq { margin-bottom: 2rem; }

.sun-faq__item {
    background: var(--table-header-bg, #f5f5f5);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
}

.sun-faq__item h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    color: var(--text-heading, #774400);
}

.sun-faq__item p {
    margin: 0;
    color: var(--text-primary, #464646);
    line-height: 1.6;
}

/* ─── Accordion (województwa) ──────────────────────────────────── */
.sun-accordion {
    margin-bottom: 2rem;
}

.sun-accordion h2 {
    margin: 0 0 1rem 0;
    color: var(--text-heading, #774400);
}

.sun-accordion__group {
    border: 1px solid var(--border-subtle, #ddd);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.sun-accordion__header {
    display: block;
    padding: 0.6rem 1rem;
    background: var(--table-header-bg, #f5f5f5);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary, #464646);
    list-style: none;
}

.sun-accordion__header::-webkit-details-marker { display: none; }

.sun-accordion__header::before {
    content: '\25B6';
    display: inline-block;
    margin-right: 0.5rem;
    font-size: 0.7rem;
    transition: transform 0.2s;
    color: var(--text-muted, #999);
}

details[open] > .sun-accordion__header::before {
    transform: rotate(90deg);
}

.sun-accordion__count {
    font-weight: 400;
    color: var(--text-muted, #999);
    font-size: 0.85rem;
}

.sun-accordion__list {
    padding: 0.75rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.sun-accordion__link {
    display: inline-block;
    background: var(--bg-white, white);
    border: 1px solid var(--border-subtle, #ddd);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--link-color, #6E3A0E);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.sun-accordion__link:hover {
    background: var(--moon-today-bg, #fff9e6);
    border-color: var(--accent-primary, #FFA901);
    text-decoration: none;
}

/* ─── Education ────────────────────────────────────────────────── */
.sun-education {
    margin-bottom: 2rem;
    background: var(--table-header-bg, #f5f5f5);
    border-radius: 8px;
    padding: 1.5rem;
}

.sun-education h2 {
    margin: 0 0 1rem 0;
    color: var(--text-heading, #774400);
}

.sun-education p {
    margin: 0 0 0.75rem 0;
    line-height: 1.7;
    color: var(--text-primary, #464646);
}

.sun-education p:last-child { margin-bottom: 0; }

/* ─── Related (base) ───────────────────────────────────────────── */
.sun-related {
    background: var(--table-header-bg, #f5f5f5);
    border-radius: 8px;
    padding: 1.5rem;
}

.sun-related h2 {
    margin: 0 0 1rem 0;
    color: var(--text-heading, #774400);
}

.sun-related__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sun-related__list li { margin-bottom: 0.5rem; }

.sun-related__list a {
    color: var(--link-color, #6E3A0E);
    text-decoration: none;
}

.sun-related__list a:hover { text-decoration: underline; }

/* ─── Related: grid+cities variant (WZ, DL) ────────────────────── */
.sun-related__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.sun-related__cities h3 {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    color: var(--text-heading, #774400);
}

.sun-related__cities-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sun-related__cities-list a {
    display: inline-block;
    background: var(--bg-white, white);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--link-color, #6E3A0E);
    text-decoration: none;
}

.sun-related__cities-list a:hover { text-decoration: underline; }

/* ─── Twilight (ZS, WS, WZ) ───────────────────────────────────── */
.sun-twilight { margin-bottom: 2rem; }
.sun-twilight__intro { color: var(--text-muted, #777); margin-bottom: 1rem; }
.sun-twilight__table-wrap { overflow-x: auto; }

.sun-twilight__table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-white, white);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.sun-twilight__table thead {
    background: var(--yrcal-month-header-bg, linear-gradient(to bottom, #ffcc6a 0%, #ffa901 100%));
    color: var(--text-heading, #774400);
}

.sun-twilight__table th,
.sun-twilight__table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle, #ddd);
}

.sun-twilight__type { white-space: nowrap; }

.sun-twilight__angle {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted, #777);
    margin-top: 2px;
}

.sun-twilight__time {
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-heading, #774400);
    white-space: nowrap;
}

/* ─── Trivia (ZS, WS, WZ) ─────────────────────────────────────── */
.sun-trivia {
    margin-bottom: 2rem;
    background: linear-gradient(135deg, var(--trivia-bg-start, #fff8e7) 0%, var(--trivia-bg-end, #fff3d6) 100%);
    border-radius: 12px;
    padding: 1.5rem;
    border-left: 4px solid var(--sun-accent, #d35400);
}

.sun-trivia h2 {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    color: var(--text-heading, #774400);
}

.sun-trivia__main {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-primary, #464646);
}

.sun-trivia__detail {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted, #777);
}

.sun-trivia__comparison {
    margin: 0.75rem 0 0 0;
    font-size: 0.9rem;
    color: var(--text-muted, #777);
    font-style: italic;
}

/* ─── Location panel (ZS, WS, DL) ─────────────────────────────── */
.sun-location-panel {
    background: var(--location-panel-bg, #fff);
    border: 1px solid var(--location-panel-border, #e2e2e2);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 4px var(--location-panel-shadow, rgba(0,0,0,0.05));
}

.sun-location-panel__field {
    margin-bottom: 1rem;
}

.sun-location-panel__field label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--text-primary, #464646);
}

.sun-location-panel__field input,
.sun-location-panel__field select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--location-input-border, #d2d2d2);
    border-radius: 4px;
}

.sun-location-panel__buttons {
    display: flex;
    gap: 0.5rem;
}

/* ─── Golden hour (ZS, WS) ────────────────────────────────────── */
.sun-golden {
    background: var(--moon-today-bg, #fff9e6);
    border: 1px solid var(--accent-primary, #FFA901);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.sun-golden h2 {
    margin: 0 0 1rem 0;
    color: var(--text-heading, #774400);
}

.sun-golden__text {
    font-size: 1.05rem;
    margin: 0 0 0.5rem 0;
    color: var(--text-primary, #464646);
}

.sun-golden__hint {
    font-size: 0.9rem;
    color: var(--text-muted, #777);
    margin: 0;
}

/* ─── Cities: single-time variant (ZS, WS) ─────────────────────── */
.sun-cities__time {
    font-size: 1.25rem;
    font-family: 'Courier New', monospace;
    color: var(--text-heading, #774400);
}

/* ─── Cities: dual-time variant (WZ, DL) ───────────────────────── */
.sun-cities__times {
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    color: var(--text-heading, #774400);
}

.sun-cities__sr { color: var(--sunrise-accent, #e67e22); }
.sun-cities__sep { color: var(--text-muted, #999); margin: 0 0.2em; }
.sun-cities__ss { color: var(--text-heading, #774400); }

/* ─── Cities: DL-specific (day_length as primary) ──────────────── */
.sun-cities__length {
    font-size: 1.15rem;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: var(--text-heading, #774400);
    margin-bottom: 0.2rem;
}

.sun-cities--dl .sun-cities__times {
    font-size: 0.85rem;
    color: var(--text-muted, #777);
}

/* ─── Hero base ───────────────────────────────────────────────── */
.sun-hero {
    background: var(--yrcal-cell-bg, #fff);
    border: 1px solid var(--border-subtle, #ddd);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    margin-bottom: 2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.sun-hero__location {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle, #ddd);
}

.sun-hero__location-label {
    color: var(--text-muted, #777);
}

.sun-hero__location-btn {
    background: var(--table-header-bg, #f5f5f5);
    border: 1px solid var(--border-medium, #ccc);
    color: var(--text-primary, #464646);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 0.5rem;
    font-size: 0.9rem;
}

.sun-hero__location-btn:hover {
    background: var(--border-subtle, #ddd);
}

@keyframes sun-pulse-glow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ─── Zachod slonca — hero ────────────────────────────────────── */
.zs-hero__sentence {
    font-size: 1.1rem;
    margin: 0 0 0.5rem 0;
    color: var(--text-primary, #464646);
}

.zs-hero__time {
    font-size: 4rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    line-height: 1;
    margin: 0.5rem 0;
    color: var(--text-heading, #774400);
}

.zs-hero__sentence--live {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--sun-accent);
}

.zs-hero__time--live {
    color: var(--sun-accent);
    animation: sun-pulse-glow 2s ease-in-out infinite;
}

.zs-hero__secondary {
    font-size: 1rem;
    margin: 1rem 0 0 0;
    color: var(--text-muted, #777);
}

/* ─── Wschod slonca — hero ────────────────────────────────────── */
.ws-hero__sentence {
    font-size: 1.1rem;
    margin: 0 0 0.5rem 0;
    color: var(--text-primary, #464646);
}

.ws-hero__time {
    font-size: 4rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    line-height: 1;
    margin: 0.5rem 0;
    color: var(--text-heading, #774400);
}

.ws-hero__sentence--live {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--sunrise-accent, #e67e22);
}

.ws-hero__time--live {
    color: var(--sunrise-accent, #e67e22);
    animation: sun-pulse-glow 2s ease-in-out infinite;
}

.ws-hero__secondary {
    font-size: 1rem;
    margin: 1rem 0 0 0;
    color: var(--text-muted, #777);
}

/* ─── Wschod-zachod — hero + golden ───────────────────────────── */
.wz-hero__times {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 1rem;
}

.wz-hero__block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wz-hero__label {
    font-size: 0.9rem;
    color: var(--text-muted, #777);
    margin-bottom: 0.25rem;
}

.wz-hero__time {
    font-size: 3.5rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    line-height: 1;
}

.wz-hero__time--sunrise {
    color: var(--sunrise-accent, #e67e22);
}

.wz-hero__time--sunset {
    color: var(--text-heading, #774400);
}

.wz-hero__day-length {
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary, #464646);
}

.wz-hero__location {
    font-size: 1rem;
    color: var(--text-muted, #777);
    margin: 0 0 0.5rem 0;
}

.wz-hero__tomorrow {
    font-size: 0.9rem;
    color: var(--text-muted, #999);
    margin: 0;
}

.wz-golden { margin-bottom: 2rem; }
.wz-golden__intro { color: var(--text-muted, #777); margin-bottom: 1rem; }

.wz-golden__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.wz-golden__card {
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
}

.wz-golden__card--golden {
    background: linear-gradient(135deg, #fff8e1, #ffecb3);
    border: 1px solid #ffc107;
}

.wz-golden__card--blue {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    border: 1px solid #2196f3;
}

.wz-golden__title {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.wz-golden__times {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 1.1rem;
}

.wz-golden__duration {
    font-size: 0.8rem;
    color: var(--text-muted, #777);
    margin-top: 0.25rem;
}

/* ─── Dlugosc dnia — hero + daynight ──────────────────────────── */
.dl-hero__subtitle {
    font-size: 1rem;
    color: var(--text-muted, #777);
    margin: 0 0 0.5rem 0;
}

.dl-hero__time {
    display: block;
    font-size: 4rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    line-height: 1;
    color: var(--text-heading, #774400);
    margin: 0.5rem 0;
}

.dl-hero__night {
    font-size: 1.1rem;
    margin: 0.5rem 0 1rem 0;
    color: var(--text-muted, #777);
}

.dl-hero__bar {
    display: flex;
    height: 32px;
    border-radius: 16px;
    overflow: hidden;
    margin: 1rem auto;
    max-width: 500px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.dl-hero__bar-day {
    background: var(--accent-primary, #FFA901);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
}

.dl-hero__bar-night {
    background: #1a237e;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
}

.dl-hero__bar-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    white-space: nowrap;
}

.dl-hero__tomorrow {
    font-size: 0.95rem;
    color: var(--text-muted, #999);
    margin: 1rem 0 0 0;
}

.dl-daynight { margin-bottom: 2rem; }

.dl-daynight__bars {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dl-daynight__row {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    align-items: center;
    gap: 0.75rem;
}

.dl-daynight__row--today .dl-daynight__label {
    font-weight: 700;
    color: var(--text-heading, #774400);
}

.dl-daynight__label {
    font-size: 0.9rem;
    color: var(--text-primary, #464646);
    text-align: right;
}

.dl-daynight__bar {
    display: flex;
    height: 28px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.dl-daynight__bar-day {
    background: var(--accent-primary, #FFA901);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
}

.dl-daynight__bar-night {
    background: #1a237e;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
}

.dl-daynight__bar-text {
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
    white-space: nowrap;
}

.dl-daynight__values {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-muted, #777);
}

.dl-daynight__day-val { color: var(--sunset-accent, #d35400); }
.dl-daynight__night-val { color: #3949ab; }

/* ─── Hero responsive ─────────────────────────────────────────── */
@media (max-width: 600px) {
    .sun-hero { padding: 1.5rem 1rem; }
    .zs-hero__time { font-size: 3rem; }
    .ws-hero__time { font-size: 3rem; }
    .wz-hero { padding: 1.5rem 1rem; }
    .wz-hero__times { gap: 1.5rem; }
    .wz-hero__time { font-size: 2.5rem; }
    .dl-hero { padding: 1.5rem 1rem; }
    .dl-hero__time { font-size: 2.8rem; }

    .dl-daynight__row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .dl-daynight__label {
        text-align: left;
        font-size: 0.85rem;
    }

    .dl-daynight__values {
        font-size: 0.75rem;
    }
}

/* ─── Heatmap (merged from sun-heatmap.css) ────────────────────── */
.sun-heatmap {
    margin-bottom: 2rem;
}

.sun-heatmap__intro {
    color: var(--text-muted, #777);
    margin-bottom: 1rem;
}

.sun-heatmap__container {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    background: #f8f6f0;
    border-radius: 8px;
    overflow: hidden;
}

.sun-heatmap__container canvas {
    display: block;
    width: 100%;
    cursor: crosshair;
}

.sun-heatmap__tooltip {
    position: absolute;
    background: rgba(255,255,255,0.95);
    color: #333;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    pointer-events: none;
    z-index: 10;
    border: 1px solid #ddd;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.sun-heatmap__legend {
    max-width: 300px;
    margin: 0.75rem auto 0;
}

.sun-heatmap__legend canvas {
    width: 100%;
    height: 16px;
    display: block;
    border-radius: 4px;
}

.sun-heatmap__legend-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-muted, #777);
    margin-top: 4px;
    font-family: 'Courier New', monospace;
}

.sun-heatmap--loading .sun-heatmap__intro,
.sun-heatmap--loading .sun-heatmap__legend-labels span {
    visibility: hidden;
}

/* ─── Responsive ───────────────────────────────────────────────── */
@media (max-width: 600px) {
    .sun-forecast__table th,
    .sun-forecast__table td {
        padding: 0.4rem;
        font-size: 0.85rem;
    }

    .sun-cities__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sun-annual__svg {
        min-width: 500px;
    }

    .sun-monthly--compact .sun-monthly__table th,
    .sun-monthly--compact .sun-monthly__table td {
        padding: 0.3rem;
        font-size: 0.75rem;
    }

    .sun-twilight__table th,
    .sun-twilight__table td {
        padding: 0.5rem;
        font-size: 0.85rem;
    }

    .sun-twilight__angle {
        font-size: 0.75rem;
    }

    /* WZ: hide description column on mobile */
    .sun-twilight--wz .sun-twilight__table th:last-child,
    .sun-twilight--wz .sun-twilight__table td:last-child { display: none; }

    .sun-related__grid {
        grid-template-columns: 1fr;
    }

    .sun-heatmap__container {
        max-width: 100%;
    }
}