/*
 * File: corwx-skywatch.css
 * Copyright (c) 2026 Connect Central Oregon. All rights reserved.
 * License pending. Not licensed for reuse or redistribution without written permission.
 *
 * Sky Watch event pages and the "Coming up in the sky" list (corwx-skywatch.php).
 */
.cx-sw { --cx-sw-navy: #0B1D34; --cx-sw-panel: #12294A; --cx-sw-gold: #D4A15A; --cx-sw-cream: #F2ECE2; --cx-sw-line: rgba(242, 236, 226, .15);
  background: var(--cx-sw-navy); color: var(--cx-sw-cream); font-family: Montserrat, sans-serif; padding: 2rem 1.5rem; line-height: 1.55; }
.cx-sw h2, .cx-sw h3, .cx-sw h4 { font-family: Oswald, sans-serif; text-transform: uppercase; color: #fff; margin: 0 0 .75rem; letter-spacing: .02em; }
.cx-sw h2 { font-size: 1.6rem; }
.cx-sw h3 { font-size: 1.25rem; color: var(--cx-sw-gold); margin-top: 1.75rem; }
.cx-sw h4 { font-size: 1rem; margin-top: 1.25rem; }
.cx-sw a { color: var(--cx-sw-gold); }
.cx-sw-facts, .cx-sw-board, .cx-sw-viewing { max-width: 72rem; margin: 0 auto; }
.cx-sw-blurb { font-size: 1.05rem; max-width: 46rem; }
.cx-sw dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 1rem 0 0; max-width: 52rem; }
.cx-sw dt { font-weight: 700; color: var(--cx-sw-gold); text-transform: uppercase; font-size: .8rem; letter-spacing: .12em; padding-top: .15rem; }
.cx-sw dd { margin: 0; }
.cx-sw-wait { background: var(--cx-sw-panel); border-left: 4px solid var(--cx-sw-gold); padding: .75rem 1rem; }
.cx-sw-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cx-sw-table { border-collapse: collapse; width: 100%; font-size: .85rem; }
.cx-sw-table th, .cx-sw-table td { border-bottom: 1px solid var(--cx-sw-line); padding: .45rem .5rem; text-align: left; vertical-align: top; }
.cx-sw-table thead th { color: var(--cx-sw-gold); font-weight: 600; white-space: nowrap; }
.cx-sw-table tbody th { font-weight: 600; min-width: 12rem; }
.cx-sw-note, .cx-sw-why { display: block; font-weight: 400; font-size: .75rem; opacity: .75; }
/* one cell per hour */
.cx-sw-h { text-align: center !important; min-width: 2.4rem; font-variant-numeric: tabular-nums; }
/* (hour cells are colored by viewing word; see the end of this file) */
td.cx-sw-na { background: transparent; opacity: .5; }
.cx-sw-badge { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.cx-sw-excellent { background: #157347; color: #fff; }
.cx-sw-good { background: #A5D46A; color: #0B1D34; }
.cx-sw-fair { background: #E3A33B; color: #0B1D34; }
.cx-sw-poor { background: #8E2F2A; color: #fff; }
.cx-sw-none { background: transparent; border: 1px solid var(--cx-sw-line); }
.cx-sw-viewing ul, .cx-sw-list ul { padding-left: 1.1rem; }
.cx-sw-viewing li, .cx-sw-list li { margin-bottom: .75rem; }
.cx-sw-fine { font-size: .75rem; opacity: .75; margin-top: 1rem; max-width: 72rem; margin-left: auto; margin-right: auto; }
@media (max-width: 767px) {
  .cx-sw { padding: 1.5rem 1rem; }
  .cx-sw dl { grid-template-columns: 1fr; }
  .cx-sw-table tbody th { min-width: 9rem; }
}
/* Viewing colors for each hour (Nov 12, 2026): one clearly different color per word (Scot: Good looked like
   Excellent when both were green), the same as the rating badges, plus twilight. */
.cx-sw-table td.cx-sw-h { line-height: 1.2; padding: .35rem .3rem; min-width: 3.4rem; }

.cx-sw-t, .cx-sw-w { display: block; font-size: .7rem; opacity: .9; white-space: nowrap; }
td.cx-sw-v-excellent, .cx-sw-key.cx-sw-v-excellent { background: #157347; color: #fff; }
td.cx-sw-v-good, .cx-sw-key.cx-sw-v-good { background: #A5D46A; color: #0B1D34; }
td.cx-sw-v-fair, .cx-sw-key.cx-sw-v-fair { background: #E3A33B; color: #0B1D34; }
td.cx-sw-v-poor, .cx-sw-key.cx-sw-v-poor { background: #8E2F2A; color: #fff; }
td.cx-sw-v-twilight, .cx-sw-key.cx-sw-v-twilight { background: #3A4A63; color: #F2ECE2; }
.cx-sw-legend { margin: 1rem 0 .5rem; font-size: .8rem; }
.cx-sw-key { display: inline-block; padding: .1rem .5rem; border-radius: 4px; margin: 0 .3rem .3rem 0; font-weight: 600; }
.cx-sw-sun { font-size: .9rem; opacity: .9; margin: 1.5rem auto 0; max-width: 72rem; }
.cx-sw-night .cx-sw-board h3 { margin-top: .5rem; }
/* Sky cover circles (weather-map style), best bet and the two-row legend (Nov 12, 2026). */
.cx-sw-ball { display: inline-block; width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box;
  background: conic-gradient(currentColor calc(var(--q, 0) * 25%), transparent 0); vertical-align: middle; }
td.cx-sw-h .cx-sw-ball { display: block; margin: 0 auto .2rem; }
.cx-sw-skykey { display: inline-flex; align-items: center; gap: .35rem; margin: 0 .9rem .3rem 0; font-size: .8rem; }
.cx-sw-skykey .cx-sw-ball { width: 1rem; height: 1rem; }
.cx-sw-legend { margin: 1rem 0 .5rem; font-size: .8rem; }
.cx-sw-legend-row { display: block; margin-bottom: .2rem; }
.cx-sw-bet { background: var(--cx-sw-panel); border-left: 4px solid var(--cx-sw-gold); padding: .6rem 1rem; margin: .5rem 0 1rem; }
/* Tabs and the pinned place column (Nov 12, 2026). Without script the tab bar hides and every panel shows. */
.cx-sw-tabs { display: none; gap: .4rem; flex-wrap: wrap; margin: .75rem 0 1rem; border-bottom: 1px solid var(--cx-sw-line); }
.cx-sw-tabs.cx-sw-tabs-on { display: flex; }
.cx-sw-tabs [role="tab"] { appearance: none; background: transparent; color: var(--cx-sw-cream); border: 1px solid var(--cx-sw-line); border-bottom: none;
  border-radius: 8px 8px 0 0; padding: .5rem 1rem; font: 600 .85rem Montserrat, sans-serif; letter-spacing: .04em; cursor: pointer; }
.cx-sw-tabs [role="tab"][aria-selected="true"] { background: var(--cx-sw-gold); color: var(--cx-sw-navy); border-color: var(--cx-sw-gold); }
.cx-sw-tabs [role="tab"]:focus-visible { outline: 2px solid #E8752A; outline-offset: 2px; }
.cx-sw-nighttabs { max-width: 72rem; margin-left: auto; margin-right: auto; }
.cx-sw-tabs-on ~ .cx-sw-panel .cx-sw-ptitle, .cx-sw-tabs-on ~ .cx-sw-panel > .cx-sw-board > h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cx-sw-table .cx-sw-place { position: sticky; left: 0; z-index: 1; background: var(--cx-sw-navy); min-width: 11rem; max-width: 14rem; box-shadow: 1px 0 0 var(--cx-sw-line); }
.cx-sw-table thead .cx-sw-place { z-index: 2; }
@media (max-width: 767px) { .cx-sw-table .cx-sw-place { min-width: 8rem; max-width: 9.5rem; font-size: .8rem; } }
/* Layout fixes (Nov 12, 2026, from Scot's screenshots):
   - The theme stripes odd table rows (table tbody > tr:nth-child(2n+1) > td); these rules outrank it, so every hour
     keeps its viewing color.
   - The block fills its Elementor box and centers its content like the rest of the page.
   - Hour cells have a fixed width so a full night (dark to dawn) fits on a desktop screen without scrolling.
   - The places toggle inside a night is a small pill switch, not a second row of tabs. */
.e-paragraph-base:has(> .cx-sw) { display: block; width: 100%; max-width: none; flex: 1 1 100%; }
.cx-sw { box-sizing: border-box; width: 100%; }
.cx-sw > * { max-width: 72rem; margin-left: auto; margin-right: auto; }
.cx-sw .cx-sw-table tbody > tr > td, .cx-sw .cx-sw-table tbody > tr > th { background-color: transparent; }
.cx-sw .cx-sw-table tbody > tr > th.cx-sw-place { background-color: var(--cx-sw-navy); }
.cx-sw .cx-sw-table tbody > tr > td.cx-sw-v-excellent { background-color: #157347; color: #fff; }
.cx-sw .cx-sw-table tbody > tr > td.cx-sw-v-good { background-color: #A5D46A; color: #0B1D34; }
.cx-sw .cx-sw-table tbody > tr > td.cx-sw-v-fair { background-color: #E3A33B; color: #0B1D34; }
.cx-sw .cx-sw-table tbody > tr > td.cx-sw-v-poor { background-color: #8E2F2A; color: #fff; }
.cx-sw .cx-sw-table tbody > tr > td.cx-sw-v-twilight { background-color: #3A4A63; color: #F2ECE2; }
.cx-sw .cx-sw-table { table-layout: auto; }
.cx-sw .cx-sw-table td.cx-sw-h, .cx-sw .cx-sw-table th.cx-sw-h { width: 4.1rem; min-width: 4.1rem; max-width: 4.1rem; padding: .35rem .2rem; }
.cx-sw .cx-sw-table .cx-sw-rate { min-width: 7.5rem; width: 7.5rem; }
.cx-sw-best { display: block; font-size: .78rem; margin-top: .3rem; }
.cx-sw .cx-sw-table .cx-sw-place { min-width: 10rem; width: 10rem; }
.cx-sw-pills { border-bottom: none; gap: 0; margin: .25rem 0 .75rem; align-items: center; }
.cx-sw-pills-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--cx-sw-gold); margin-right: .6rem; }
.cx-sw-pills [role="tab"] { border: 1px solid var(--cx-sw-gold); border-radius: 0; padding: .3rem .9rem; font-size: .78rem; }
.cx-sw-pills [role="tab"]:first-of-type { border-radius: 999px 0 0 999px; }
.cx-sw-pills [role="tab"]:last-of-type { border-radius: 0 999px 999px 0; border-left: none; }
.cx-sw-pills [role="tab"][aria-selected="true"] { background: var(--cx-sw-gold); color: var(--cx-sw-navy); }
@media (max-width: 767px) {
  .cx-sw .cx-sw-table .cx-sw-place { min-width: 7.5rem; width: 7.5rem; }
  .cx-sw .cx-sw-table .cx-sw-rate { min-width: 6.5rem; width: 6.5rem; }
}