@import url('table.css');

:root {
    --climate-color-surface: #ffffff;
    --climate-color-control-surface: #f8f8f8;
    --climate-color-control-text: #425f59;
    --climate-color-control-hover: #cfc;
    --climate-color-link: #0071c1;
    --climate-color-link-hover: #0a58ca;
    --climate-color-muted-text: #595959;
    --climate-color-info-icon: #79c6f4;
    --climate-color-tab-surface: #eef5f2;
    --climate-color-tab-border: #6b8e89;
    --climate-color-control-border: #c4d4d1;
    --climate-color-nav-surface: #425f59;
    --climate-color-danger: #a00000;
    --climate-radius-control: 8px;
    --climate-shadow-control: rgb(0 0 0 / 20%) 0 0 4px;
    --climate-shadow-panel: rgb(0 0 0 / 15%) 1px 1px 12px;
    --climate-space-control-padding: 8px;
    --climate-space-control-gap: 0.5rem;
    --climate-transition-control: background-color 0.25s, color 0.25s, border-color 0.25s;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    line-height: 1.2;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.9rem; }
h6 { font-size: 0.85rem; }

a {
    color: var(--climate-color-link);
}

.content {
    padding-top: 12px;
    /* This is so that the map (which wants to use absolute positioning) is positioned relative to the top of the page content (which begins after the top navbar if any) */
    position: relative;
}

/* Stop the page scrolling behind an open Modal. Modal.razor.js measures the scrollbar this hides, and the padding
   takes its place so the page doesn't shift sideways. */
html:has(dialog.modal[open]) {
    overflow: hidden;
    padding-right: var(--climate-modal-scrollbar-width, 0px);
}

.secondary-text {
    color: var(--climate-color-muted-text);
}

.button {
    padding: var(--climate-space-control-padding);
    background-color: var(--climate-color-control-surface);
    border: none;
    border-radius: var(--climate-radius-control);
    text-decoration: none;
    color: var(--climate-color-control-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    vertical-align: text-bottom;
    gap: var(--climate-space-control-gap);
    position: relative;
    user-select: none;
    font: inherit;
    box-shadow: var(--climate-shadow-control);
    transition: var(--climate-transition-control);
}

.button:hover:not(:disabled) {
    background-color: var(--climate-color-control-hover);
}

.button:disabled {
    opacity: 0.45;
    cursor: default;
}

.button--compact {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 6px;
}

.button--stacked {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.button--stacked .label {
    display: block;
    font-size: 11px;
    opacity: 0.85;
    margin-top: 2px;
}

/* DropdownButton. The styles are global, not scoped to the component, because items are rendered by the
   component that fills the menu, and consumers (e.g. NavMenu's dark menus) restyle the menu with one-class
   ::deep selectors that need to win without depending on the order of the scoped CSS bundle. */
.dropdown {
    display: inline-flex;
    align-items: center;
}

.dropdown-toggle {
    padding: var(--climate-space-control-padding);
    background-color: var(--climate-color-control-surface);
    border: none;
    border-radius: var(--climate-radius-control);
    text-decoration: none;
    color: var(--climate-color-control-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--climate-space-control-gap);
    position: relative;
    user-select: none;
    white-space: nowrap;
    font: inherit;
    box-shadow: var(--climate-shadow-control) !important;
    transition: var(--climate-transition-control);
}

/* Disabled only while prerendered, so it looks the same */
.dropdown-toggle:disabled {
    cursor: default;
}

.dropdown-toggle:hover,
.dropdown-toggle:focus,
.dropdown-toggle:active,
.dropdown:has(> .dropdown-menu:popover-open) > .dropdown-toggle {
    background-color: var(--climate-color-control-hover);
    color: var(--climate-color-control-text);
}

/* The caret */
.dropdown-toggle::after {
    content: "";
    display: inline-block;
    vertical-align: 0.255em;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

/* A top-layer popover; DropdownButton.razor.js sets its position and data-placement */
.dropdown-menu {
    /* Reset the UA popover styles (centred in the viewport, with padding and a border) */
    margin: 0;
    inset: auto;
    padding: 0.25rem 0;
    min-width: 10rem;
    max-height: calc(100dvh - 16px);
    overflow: auto;
    border: 1px solid var(--climate-color-control-border);
    border-radius: var(--climate-radius-control);
    background-color: var(--climate-color-surface);
    color: #212529;
    font-size: 1rem;
    font-weight: normal;
    text-align: left;
    box-shadow: var(--climate-shadow-panel);
}

/* Hidden, but still measurable, until it's been positioned */
.dropdown-menu:popover-open:not([data-placement]) {
    visibility: hidden;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 2rem;
    padding: 0.25rem 1rem;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

@media (pointer: coarse) {
    .dropdown-item {
        min-height: 44px;
    }
}

.dropdown-item:hover:not(:disabled) {
    background-color: var(--climate-color-control-hover);
}

.dropdown-item:focus-visible {
    outline: 2px solid var(--climate-color-control-text);
    outline-offset: -2px;
}

.dropdown-item:disabled {
    opacity: 0.5;
    cursor: default;
}

.dropdown-header {
    padding: 0.5rem 1rem;
    color: var(--climate-color-muted-text);
    font-size: 0.875rem;
    white-space: nowrap;
}

.dropdown-divider {
    margin: 0.25rem 0;
    border: 0;
    border-top: 1px solid rgb(0 0 0 / 15%);
    opacity: 1;
}

.link-button {
    color: var(--climate-color-link);
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: none;
    font: inherit;
    padding: 0;
}

.link-button:hover {
    color: var(--climate-color-link-hover);
}

/* Shared box for the Select and TextInput form controls, so the two can't drift. Each component's scoped
   CSS adds its own padding and extras (chevron, invalid state). */
.control {
    min-height: 2rem;
    background-color: var(--climate-color-control-surface);
    border: 1px solid var(--climate-color-control-border);
    border-radius: var(--climate-radius-control);
    color: var(--climate-color-control-text);
    font: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
    max-width: 100%;
    transition: var(--climate-transition-control);
}

/* Compact for a mouse or trackpad (well above WCAG 2.5.8's 24px), a full 44px target for a finger. 1rem text
   also stops iOS Safari zooming the page when the control takes focus. */
@media (pointer: coarse) {
    .control {
        min-height: 44px;
        font-size: 1rem;
    }
}

.control:hover:not(:disabled) {
    background-color: var(--climate-color-control-hover);
}

.control:focus-visible {
    outline: 2px solid var(--climate-color-control-text);
    outline-offset: 1px;
}

.control:disabled {
    opacity: 0.6;
}

.checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: #2a3d39;
    user-select: none;
    margin: 0;
}

.checkbox-input {
    accent-color: var(--climate-color-control-text);
    width: 0.8rem;
    height: 0.8rem;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

/* A checkbox that is a whole row of a dropdown menu: fills the row, matches the dropdown item
   padding and font, and meets the 44px touch target */
.checkbox--menu-row {
    min-height: 44px;
    padding: 0 1rem;
    font-size: inherit;
}

.checkbox--menu-row:hover {
    background-color: var(--climate-color-control-hover);
}

/* The shared tooltip shown by js/tooltip.js for the Tooltip component. A top-layer popover outside every
   component, so it's styled here. js/floating.js sets its position. */
.tooltip {
    /* Reset the UA popover styles (centred in the viewport, with padding and a border) */
    margin: 0;
    inset: auto;
    overflow: visible;
    border: 1px solid var(--climate-color-control-border);
    border-radius: var(--climate-radius-control);
    padding: 0.375rem 0.625rem;
    background: var(--climate-color-surface);
    color: var(--climate-color-control-text);
    font-size: 0.875rem;
    line-height: 1.35;
    text-align: left;
    box-shadow: var(--climate-shadow-panel);
    max-width: calc(100vw - 16px);
    pointer-events: none;
}

.tooltip.is-multiline {
    max-width: 15rem;
}

.tooltip p {
    margin: 0 0 0.5rem;
}

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

@media (prefers-reduced-motion: no-preference) {
    .tooltip:popover-open {
        transition: opacity 0.15s;
    }

    @starting-style {
        .tooltip:popover-open {
            opacity: 0;
        }
    }
}

/* Trend statistics breakdown. Global rather than component-scoped because the same markup
   (TrendStatTable, TrendsOverviewExplainer) is rendered from both the Recent Observations
   About-trends panel and the chart series trend panel; each wraps its content in .trend-stats. */
.trend-stats .trends-overview p {
    line-height: 1.45;
    margin: 0 0 0.9rem;
}

.trend-stats .trends-about-tabs {
    margin-bottom: 1rem;
}

.trend-stats .trends-about-unavailable {
    color: #5d6d69;
}

.trend-stats .trends-stat-section-title {
    color: #253b36;
    font-size: 0.95rem;
    margin: 1.1rem 0 0.4rem;
}

.trend-stats .trends-stat-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 0 0 1.1rem;
}

.trend-stats .trends-stat-row {
    display: contents;
}

.trend-stats .trends-stat-row.expandable {
    cursor: pointer;
}

.trend-stats .trends-stat-row dt,
.trend-stats .trends-stat-row dd {
    border-top: 1px solid rgb(66 95 89 / 12%);
    padding-bottom: 0.35rem;
    padding-top: 0.35rem;
}

.trend-stats .trends-stat-row:nth-child(even of .trends-stat-row) dt,
.trend-stats .trends-stat-row:nth-child(even of .trends-stat-row) dd {
    background-color: #f2f2f2;
}

.trend-stats .trends-stat-row.expandable:hover dt,
.trend-stats .trends-stat-row.expandable:hover dd {
    background-color: #e0edeb;
}

.trend-stats .trends-stat-row.expandable:focus-visible dt,
.trend-stats .trends-stat-row.expandable:focus-visible dd {
    background-color: #e0edeb;
    outline: 2px solid #0071c1;
    outline-offset: -2px;
}

.trend-stats .trends-stat-row dt {
    color: #45605a;
    font-size: 0.85rem;
    padding-left: 0.4rem;
    padding-right: 0.6rem;
}

.trend-stats .trends-stat-row.emphasized dt {
    font-weight: 800;
}

.trend-stats .trends-stat-row dd {
    align-items: flex-start;
    display: flex;
    gap: 0.3rem;
    margin: 0;
    min-width: 0;
    padding-right: 0.4rem;
}

.trend-stats .trends-stat-value {
    color: #263a35;
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

.trend-stats .trends-stat-row.emphasized .trends-stat-value {
    font-weight: 700;
}

.trend-stats .trends-stat-chevron {
    color: #595959;
    display: inline-block;
    flex-shrink: 0;
    font-size: 0.9rem;
    margin-left: auto;
    transform: rotate(0deg);
    transform-origin: center;
    transition: transform 0.15s ease-in-out;
}

.trend-stats .trends-stat-chevron.expanded {
    transform: rotate(90deg);
}

.trend-stats .trends-stat-row.expandable:hover .trends-stat-chevron,
.trend-stats .trends-stat-row.expandable:focus-visible .trends-stat-chevron {
    color: #0071c1;
}

.trend-stats .trends-stat-explanation {
    background: #f4f8f6;
    border-radius: 6px;
    color: #000;
    font-size: 0.85rem;
    grid-column: 1 / -1;
    line-height: 1.45;
    margin: 0.3rem 0 0.5rem;
    padding: 0.6rem 0.75rem;
}

.trend-stats .trends-stat-explanation p {
    margin: 0 0 0.5rem;
}

.trend-stats .trends-stat-explanation p:last-child {
    margin-bottom: 0;
}

.trend-stats .trends-stat-worked-examples {
    margin: 0 0 0.5rem;
    padding-left: 1.1rem;
}

.trend-stats .trends-stat-worked-examples:last-child {
    margin-bottom: 0;
}

.trend-stats .trends-stat-worked-examples li {
    margin: 0 0 0.35rem;
}

.trend-stats .trends-stat-worked-examples li:last-child {
    margin-bottom: 0;
}

.trend-stats .trends-download {
    background: none;
    border: 1px solid #cdddd8;
    border-radius: 6px;
    color: #45605a;
    cursor: pointer;
    margin-top: 0.9rem;
    padding: 0.4rem 0.6rem;
}

.trend-stats .trends-download:hover,
.trend-stats .trends-download:focus {
    background: #f4f8f6;
}

.trend-stats .trend-stats-summary {
    color: #45605a;
    font-size: 0.9rem;
    margin: 0.9rem 0 0;
}

.trend-stats .trend-stats-summary.not-significant {
    color: #8a5a00;
}