/*
 * OpenWeather Widget & Shortcode — Default Styles
 * These are intentionally minimal so your theme can easily override them.
 * All classes are prefixed with .oww- to avoid conflicts.
 *
 * Override any of these in your theme's style.css or via
 * Appearance → Customize → Additional CSS.
 */

/* ── Outer wrapper ───────────────────────────────── */
.oww-widget {
    display: inline-block;
    padding: 1em 1.25em;
    background: #f7f9fc;
    border: 1px solid #dde3ec;
    border-radius: 8px;
    font-family: inherit;
    line-height: 1.5;
    color: #2d3748;
    text-align: center;
    max-width: 220px;
}

/* ── Widget title ────────────────────────────────── */
.oww-widget-title {
    margin: 0 0 0.5em;
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #718096;
}

/* ── Weather icon ────────────────────────────────── */
.oww-icon {
    display: block;
    margin: 0 auto 0.25em;
    width: 64px;
    height: 64px;
}

/* ── City name ───────────────────────────────────── */
.oww-city-name {
    margin: 0 0 0.15em;
    font-size: 1em;
    font-weight: 600;
    color: #2d3748;
}

/* ── Temperature ─────────────────────────────────── */
.oww-temp {
    margin: 0.1em 0;
    font-size: 2em;
    font-weight: 700;
    line-height: 1.1;
    color: #1a202c;
}

/* ── Condition description ───────────────────────── */
.oww-description {
    margin: 0.1em 0;
    font-size: 0.9em;
    color: #4a5568;
    font-style: italic;
}

/* ── Secondary details ───────────────────────────── */
.oww-feels-like,
.oww-humidity,
.oww-wind {
    margin: 0.15em 0 0;
    font-size: 0.8em;
    color: #718096;
}

/* ── Error state ─────────────────────────────────── */
.oww-error {
    color: #c53030;
    background: #fff5f5;
    border-color: #feb2b2;
    font-size: 0.85em;
    text-align: left;
    padding: 0.75em 1em;
    max-width: 100%;
}

/* ── Shortcode inline variant ────────────────────── */
/*
   When used as a shortcode inside a paragraph, you may want
   the widget to flow inline rather than as a block.
   Add class="oww-inline" via a custom wrapper if needed,
   or override .oww-widget in your theme CSS:

   .entry-content .oww-widget {
       display: block;
       max-width: 100%;
       text-align: left;
   }
*/