/**
 * Global Weather Pro - Main Styles
 * Theme loader and base styles for the weather widget
 * 
 * Theme System:
 * - Dark Theme: gwpro-dark-theme.css
 * - Light Theme: gwpro-light-theme.css
 * - Alert Styles: alert-icon-styles.css
 */

/* ============================================= */
/* Global Reset & Base Styles                   */
/* ============================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================= */
/* Transition Defaults                          */
/* ============================================= */

.weather-widget-header,
.weather-widget-sidebar,
.weather-widget-header *,
.weather-widget-sidebar * {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Disable transitions for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .weather-widget-header,
  .weather-widget-sidebar,
  .weather-widget-header *,
  .weather-widget-sidebar * {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================= */
/* Utility Classes                              */
/* ============================================= */

/* No-select utility */
.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Screen reader only - Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Visually hidden but focusable */
.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ============================================= */
/* Container Base Styles                        */
/* ============================================= */

.weather-widget-container {
  width: 100%;
  max-width: 100%;
}

#weather-widget-container-header,
#weather-widget-container-sidebar {
  width: 100%;
}

/* ============================================= */
/* Focus Styles for Accessibility               */
/* ============================================= */

/* Custom focus ring for interactive elements */
.weather-widget-header a:focus-visible,
.weather-widget-header button:focus-visible,
.weather-widget-sidebar a:focus-visible,
.weather-widget-sidebar button:focus-visible,
[data-role="unit-toggle"]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Remove default outline when using focus-visible */
.weather-widget-header a:focus:not(:focus-visible),
.weather-widget-header button:focus:not(:focus-visible),
.weather-widget-sidebar a:focus:not(:focus-visible),
.weather-widget-sidebar button:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================= */
/* Skip Link for Accessibility                  */
/* ============================================= */

.gwpro-skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 100;
  text-decoration: none;
  font-weight: 600;
}

.gwpro-skip-link:focus {
  top: 0;
}

/* ============================================= */
/* Bottom-right controls (buttons + alert)       */
/* ============================================= */

/* Make the tab wrapper a positioning context */
.weather-widget-header {
  position: relative;
}

/* ============================================= */
/* Print Styles                                 */
/* ============================================= */

@media print {
  .weather-widget-header,
  .weather-widget-sidebar {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }

  .weather-widget-header::before,
  .weather-widget-sidebar::before {
    display: none !important;
  }

  .alert-icon-class,
  .forecast-toggle-controls {
    display: none !important;
  }
}
/* ============================================================================
   Font-Independent Layout Normalization
   ============================================================================
   The Typography setting now offers 18 fonts with very different metrics
   (x-heights, character widths, default leading). These rules pin down every
   dimension that a font could otherwise influence, so the widget layout stays
   identical no matter which font the user selects.
   ========================================================================= */

/* 1. Normalize optical size and vertical rhythm.
   - font-size-adjust scales every font so its x-height matches Roboto's
     (aspect ~0.52), so small-x-height serifs (EB Garamond, Playfair Display)
     don't render visually smaller than the sans-serifs at the same em size.
     Browsers without support simply ignore it.
   - An explicit unitless line-height overrides each font's own default
     leading, which otherwise varies enough to shift rows vertically. */
.weather-widget-header,
.weather-widget-sidebar {
  font-size-adjust: 0.52;
  line-height: 1.4;
  /* Tabular (fixed-width) numerals keep temperatures, times, and
     percentages the same width in every font, including proportional
     serifs, so columns don't jitter between values. */
  font-variant-numeric: tabular-nums lining-nums;
}

/* 2. Interactive controls never wrap or reflow in wide fonts.
   Playfair Display and Merriweather are ~15-20% wider than Roboto; without
   nowrap, tab labels like "Precipitation" or "UV Index" wrap to two lines
   and change the tab bar height. */
.weather-widget-header .tablinks,
.weather-widget-header .forecast-toggle-btn,
.weather-widget-header .unit-toggle-btn,
.weather-widget-sidebar .unit-toggle-btn {
  white-space: nowrap;
}

/* 3. Fixed-width forecast columns.
   The theme stylesheets give hourly cells only a min-width, so wide fonts
   grow individual columns and desynchronize the strip. Locking flex-basis
   and width makes column geometry font-independent. (Widget-class prefix
   deliberately out-specifies the equal-specificity theme rules, which load
   after this file.) */
.weather-widget-header #hourly-tabs .flex-tabcontent > div,
.weather-widget-header #seven-day-tabs .flex-tabcontent > div {
  flex: 0 0 5em;
  width: 5em;
  max-width: 5em;
  min-width: 5em;
  text-align: center;
}

/* 4. Truncate overflow inside fixed columns instead of breaking layout.
   Each cell stacks three block rows (label, icon, value); any row whose
   text exceeds the fixed column width ellipsizes. Full values remain
   available via existing title/aria-label attributes (e.g. AQI badges). */
.weather-widget-header .flex-tabcontent > div > div {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 5. Cap the weather location's line length so long addresses wrap early
   instead of pushing right-side elements out of position.
   30ch fits roughly 32 proportional characters per line (the width of
   "University of Florida, Southwest"), so e.g.
   "University of Florida, Southwest 40th Place, Gainesville, FL, US"
   renders as two-to-three short lines inside a fixed-width box. Because
   ch is font-relative, the cap tracks the selected font automatically:
   wide fonts get a wider box, monospace wider still, but always the same
   character count — so the elements to the right of the location sit in
   the same place no matter the font or the address length. The min()
   guard keeps the box from exceeding its container on narrow screens.
   (Widget-class prefix out-specifies the themes' max-width: 100% rules.) */
.weather-widget-header .weather-city,
.weather-widget-sidebar .weather-location {
  max-width: min(30ch, 100%);
  white-space: normal;
  overflow-wrap: break-word;
}

/* 6. Column discipline for the header's top row.
   The location column yields (shrinks) when space is tight; the two
   parameter columns are rigid and content-sized, and their label/value
   rows never wrap — so values like "0.23 mm" can't break onto a second
   line when a wide font eats the horizontal space. Any remaining box
   slack on the wrapped location heading is removed at runtime by
   gwproFitLocationWidth() in weatherApiAdapter.js, which pins the
   heading's width to its widest rendered line. */
.weather-widget-header .custom-flex-col1 {
  flex: 0 1 auto;
  min-width: 0;
}

.weather-widget-header .custom-flex-col2,
.weather-widget-header .custom-flex-col3 {
  flex: 0 0 auto;
}

.weather-widget-header .custom-flex-col2 > div,
.weather-widget-header .custom-flex-col3 > div {
  white-space: nowrap;
}