/*
 * Severe Weather Lookup - default styles.
 * Theme-able via CSS custom properties (override .swl in your theme).
 * Colour is always paired with an icon and text, never used alone to convey
 * the answer.
 */
.swl {
	--swl-radius: 8px;
	--swl-gap: 1rem;
	--swl-fg: #1a1a1a;
	--swl-muted: #555;
	--swl-border: #d8dde3;
	--swl-yes-bg: #b21e14; --swl-yes-fg: #ffffff; --swl-yes-bd: #7a0d0d;   /* warning: urgent red */
	--swl-maybe-bg: #fdeee0; --swl-maybe-fg: #8a3b0b; --swl-maybe-bd: #e6b489; /* may affect: orange */
	--swl-watch-bg: #fff6e5; --swl-watch-fg: #6f5500; --swl-watch-bd: #e6c884;  /* watch: amber */
	--swl-no-bg: #e9f6ec; --swl-no-fg: #1e6b32; --swl-no-bd: #a9d8b6;       /* clear: green */
	--swl-unknown-bg: #eef1f5; --swl-unknown-fg: #33414f; --swl-unknown-bd: #c2cdd8;
	--swl-tornado-bg: #7a0d0d; --swl-tornado-fg: #fff;
	max-width: 640px;
	color: var(--swl-fg);
	line-height: 1.5;
}

/* Form */
.swl-form { margin: 0 0 var(--swl-gap); }
.swl-form__label { display: block; font-weight: 600; margin-bottom: .35rem; }
.swl-form__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.swl-form__input {
	flex: 1 1 12rem;
	padding: .6rem .7rem;
	font-size: 1.05rem;
	border: 1px solid var(--swl-border);
	border-radius: var(--swl-radius);
}
.swl-form__submit {
	padding: .6rem 1.2rem;
	font-size: 1.05rem;
	font-weight: 600;
	cursor: pointer;
	border: 0;
	border-radius: var(--swl-radius);
	background: #1f4e79;
	color: #fff;
}
.swl-form__submit:hover { background: #163a5a; }
.swl :focus-visible { outline: 3px solid #1f6feb; outline-offset: 2px; }

/* Links: accessible contrast + underlined, so they never rely on colour alone.
   Overrides themes (e.g. Divi) that strip underlines and use a low-contrast blue. */
.swl a { color: #0b5cab; text-decoration: underline; }
.swl a:hover { color: #08406f; }

/* Result region */
.swl-result { margin: var(--swl-gap) 0; }
.swl-location { font-weight: 600; margin: 0 0 .6rem; }

/* The primary answer block */
.swl-answer {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	padding: 1rem;
	border: 2px solid var(--swl-unknown-bd);
	border-radius: var(--swl-radius);
	background: var(--swl-unknown-bg);
	color: var(--swl-unknown-fg);
	margin: 0 0 var(--swl-gap);
}
.swl-answer__text { margin: 0; font-size: 1.15rem; font-weight: 600; }
.swl-answer--yes { background: var(--swl-yes-bg); color: var(--swl-yes-fg); border-color: var(--swl-yes-bd); }
.swl-answer--yes .swl-answer__text { font-size: 1.25rem; }
.swl-answer--maybe { background: var(--swl-maybe-bg); color: var(--swl-maybe-fg); border-color: var(--swl-maybe-bd); }
.swl-answer--watch { background: var(--swl-watch-bg); color: var(--swl-watch-fg); border-color: var(--swl-watch-bd); }
.swl-answer--no { background: var(--swl-no-bg); color: var(--swl-no-fg); border-color: var(--swl-no-bd); }
.swl-answer--unknown { background: var(--swl-unknown-bg); color: var(--swl-unknown-fg); border-color: var(--swl-unknown-bd); }

.swl-icon { flex: 0 0 auto; width: 28px; height: 28px; }

/* Tornado banner (life-safety, dominates) */
.swl-banner--tornado {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	padding: 1rem;
	border-radius: var(--swl-radius);
	background: var(--swl-tornado-bg);
	color: var(--swl-tornado-fg);
	margin: 0 0 var(--swl-gap);
}
.swl-banner__text { margin: 0; font-size: 1.1rem; }

/* Alert cards */
.swl-alerts { list-style: none; margin: 0 0 var(--swl-gap); padding: 0; }
.swl-alert {
	border: 1px solid var(--swl-border);
	border-left: 4px solid var(--swl-muted);
	border-radius: var(--swl-radius);
	padding: .85rem 1rem;
	margin: 0 0 .75rem;
}
.swl-alert--tornado-warning { border-left-color: #7a0d0d; }
.swl-alert--severe-thunderstorm-warning { border-left-color: #b3450e; }
.swl-alert--tornado-watch { border-left-color: #8a5a00; }
.swl-alert--severe-thunderstorm-watch { border-left-color: #8a7400; }
.swl-alert__title { margin: 0 0 .35rem; font-size: 1.1rem; }
.swl-alert__proximity { margin: 0 0 .5rem; font-weight: 600; }
.swl-alert__proximity--nearby { color: var(--swl-maybe-fg); }
.swl-alert__area, .swl-alert__expires { margin: .2rem 0; color: var(--swl-muted); }
.swl-alert__k { font-weight: 600; color: var(--swl-fg); }
.swl-alert__details { margin-top: .5rem; }
.swl-alert__details summary { cursor: pointer; font-weight: 600; }
.swl-alert__detailbody { margin-top: .5rem; font-size: .95rem; color: var(--swl-muted); }

.swl-clear-note { margin: 0 0 var(--swl-gap); }
.swl-asof { font-size: .9rem; color: var(--swl-muted); margin: .5rem 0; }
.swl-verify { margin: .25rem 0 var(--swl-gap); font-weight: 600; }

/* Disclaimer */
.swl-disclaimer {
	border: 1px solid var(--swl-border);
	border-radius: var(--swl-radius);
	background: #f7f9fb;
	padding: 1rem;
	font-size: .95rem;
	color: var(--swl-muted);
}
.swl-disclaimer__lead, .swl-disclaimer p { margin: 0 0 .5rem; }
.swl-disclaimer__emergency { margin: .5rem 0 0; color: #8a1c12; }

/* Alerts interest poll (rendered by [severe_weather_alerts_poll]) */
.swl-poll__lead { font-weight: 600; margin: 0 0 1rem; }
.swl-poll__q {
	border: 1px solid var(--swl-border);
	border-radius: var(--swl-radius);
	padding: .75rem 1rem;
	margin: 0 0 .75rem;
}
.swl-poll__legend { font-weight: 700; padding: 0 .35rem; }
.swl-poll__opt { display: inline-flex; align-items: center; gap: .4rem; margin: .25rem 1.25rem .25rem 0; cursor: pointer; }
.swl-poll__thanks { font-weight: 700; margin: 0 0 1rem; }
.swl-poll__results { list-style: none; margin: 0; padding: 0; }
.swl-poll__result { margin: 0 0 1rem; }
.swl-poll__result-label { margin: 0 0 .35rem; }
.swl-poll__bar { width: 100%; height: 18px; border: 1px solid var(--swl-border); border-radius: 9px; overflow: hidden; }
/* progress element theming (cross-browser) */
.swl-poll__bar { color: #1f4e79; background: #eef1f5; appearance: none; -webkit-appearance: none; }
.swl-poll__bar::-webkit-progress-bar { background: #eef1f5; }
.swl-poll__bar::-webkit-progress-value { background: #1f4e79; }
.swl-poll__bar::-moz-progress-bar { background: #1f4e79; }

/* FAQ (rendered by [severe_weather_faq]) */
.swl-faq { max-width: 760px; }
.swl-faq__q { margin: 1.25rem 0 .4rem; }
.swl-faq__a { margin: 0 0 1rem; }

@media (prefers-contrast: more) {
	.swl-answer, .swl-alert, .swl-disclaimer { border-width: 2px; }
}