/*
 * weather-alerts.css — IndiaRealTime Weather Alerts
 *
 * Self-contained: every colour/spacing value falls back to a theme token
 * with a hard-coded literal fallback (var(--token, #hex)) since this
 * stylesheet loads on every page site-wide (banner/shortcode can appear
 * anywhere), not only pages that are guaranteed to have ir-tokens.css
 * already resolved first.
 *
 * Design constraints (per brief): white background, body text never
 * lighter than #555, brand saffron reserved for the logo only (this file
 * never uses --brand for text/backgrounds), --brand-text (#B84400) for
 * inline links/small text, and the IMD Red/Orange/Yellow/Green scale
 * reserved exclusively for alert severity - it never touches brand colour.
 * font-variant-numeric: tabular-nums on every numeric readout via .irt-tnum.
 * Mobile-first; 44px touch targets; focus rings inherit from ir-tokens.css's
 * global :focus-visible rule (not redefined here).
 */

:root {
    --irt-red: #D32F2F;      --irt-red-text: #FFFFFF;
    --irt-orange: #E4571B;   --irt-orange-text: #FFFFFF;
    --irt-yellow: #E8A400;   --irt-yellow-text: #1A1C22;
    --irt-green: #1E8E4E;    --irt-green-text: #FFFFFF;
}

.irt-tnum { font-variant-numeric: tabular-nums; }
.irt-vh {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ───────────────────────── PART 1: SUMMARY HEADER (G) ───────────────── */
.irt-summary {
    background: var(--wh, #fff);
    border: 1px solid var(--bd, #DDDDDD);
    border-radius: var(--r, 12px);
    padding: 14px 16px;
    margin: 16px 0;
}
.irt-summary-line {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink, #1A1C22);
}
.irt-summary-sep { color: var(--mt, #555555); margin: 0 6px; font-weight: 400; }
.irt-summary-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.irt-summary-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 999px;
    font-size: 13px; font-weight: 600;
}

.irt-notice {
    padding: 12px 14px; border-radius: var(--r-s, 8px); margin: 16px 0 0;
    background: var(--brand-tint-50, #FFF3EA); color: var(--ink-2, #333333);
    border: 1px solid var(--brand-tint-100, #FFE3D1);
    font-size: 14px;
}

/* ───────────────────────── PART 2: ALERTS NEAR ME (B) ───────────────── */
.irt-sec-title {
    font-size: var(--fs-h2, 18px); font-weight: 600;
    color: var(--ink, #1A1C22); margin: 28px 0 12px;
}
.irt-nearme-wrap { margin-top: 8px; }
.irt-nearme-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.irt-nearme-search { display: flex; gap: 8px; flex: 1 1 260px; min-width: 0; }
.irt-nearme-search input[type="text"] {
    flex: 1 1 auto; min-width: 0; min-height: 44px;
    padding: 0 12px; border-radius: var(--r-s, 8px);
    border: 1px solid var(--bd, #DDDDDD);
    font-size: 15px; color: var(--ink-2, #333333); background: #FFFFFF;
}
.irt-noscript-note { color: var(--mt, #555555); font-size: 14px; margin-top: 10px; }

.irt-nearme-box {
    margin-top: 14px; padding: 16px;
    border-radius: var(--r, 12px);
    border: 2px solid var(--brand-text, #B84400);
    background: var(--brand-tint-50, #FFF3EA);
}
.irt-nearme-hd { font-size: 15px; color: var(--ink, #1A1C22); margin-bottom: 10px; }
.irt-nearme-clear { color: var(--ink-2, #333333); font-size: 14px; margin: 0; }
.irt-nearme-list { display: flex; flex-direction: column; gap: 12px; }
.irt-nearme-list .irt-a-card { background: #FFFFFF; }

/* Shared button styling used by "Detect my location", "Search", subscribe. */
.irt-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; min-width: 44px; padding: 0 16px;
    border-radius: var(--r-s, 8px); border: 1px solid var(--bd, #DDDDDD);
    background: var(--wh, #fff); color: var(--ink-2, #333333);
    font-size: 15px; font-weight: 500; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.irt-btn:hover { background: var(--surface-2, #F5F5F5); }
.irt-btn-primary {
    background: var(--brand-text, #B84400); border-color: var(--brand-text, #B84400);
    color: #FFFFFF;
}
.irt-btn-primary:hover { background: var(--brand-text-on-tint, #8F3400); }
.irt-btn:disabled { opacity: .6; cursor: default; }

/* ───────────────────────── PART 3: STATE HEATMAP (E) ────────────────── */
.irt-heatmap-wrap { margin-top: 8px; }
.irt-heatmap-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
@media (min-width: 480px) { .irt-heatmap-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px) { .irt-heatmap-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1024px) { .irt-heatmap-grid { grid-template-columns: repeat(6, 1fr); } }

.irt-heatmap-cell {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    min-height: 44px; padding: 8px 10px;
    border-radius: var(--r-s, 8px);
    font-size: 13px; font-weight: 600; line-height: 1.25;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.irt-heatmap-cell:hover { transform: translateY(-1px); box-shadow: var(--shadow-1, 0 1px 4px rgba(26,28,34,.12)); }
.irt-heatmap-name { overflow-wrap: anywhere; }
.irt-heatmap-count {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 999px; background: rgba(0,0,0,.22);
    font-size: 12px;
}
.irt-heatmap-legend {
    display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px;
    font-size: 13px; color: var(--mt, #555555);
}
.irt-heatmap-legend span { display: inline-flex; align-items: center; gap: 6px; }
.irt-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* ───────────────────────── PART 4: ALERT CARDS (A/C/D/F) ────────────── */
.irt-a-list { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.irt-a-card {
    background: var(--wh, #fff);
    border: 1px solid var(--bd, #DDDDDD);
    border-left: 6px solid var(--ink-disabled, #8C8C8C);
    border-radius: var(--r, 12px);
    box-shadow: var(--shadow-1, 0 1px 4px rgba(26,28,34,.06));
    padding: 16px;
}
.irt-a-card.irt-a-red    { border-left-color: var(--irt-red); }
.irt-a-card.irt-a-orange { border-left-color: var(--irt-orange); }
.irt-a-card.irt-a-yellow { border-left-color: var(--irt-yellow); }

.irt-a-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.irt-a-badge {
    display: inline-flex; align-items: center; min-height: 28px;
    padding: 3px 12px; border-radius: 999px;
    font-size: 13px; font-weight: 700; letter-spacing: .01em;
}
.irt-a-event { font-size: 13px; font-weight: 600; color: var(--mt, #555555); text-transform: uppercase; letter-spacing: .03em; }

.irt-a-headline {
    font-size: var(--fs-h2, 18px); font-weight: 600; line-height: 1.35;
    color: var(--ink, #1A1C22); margin: 0 0 10px;
}
.irt-a-hazard { font-size: 15px; line-height: 1.6; color: var(--ink-2, #333333); margin: 0 0 8px; }
.irt-a-action {
    font-size: 15px; line-height: 1.6; color: var(--ink-2, #333333);
    margin: 0 0 10px; padding: 10px 12px;
    background: var(--surface-2, #F5F5F5); border-radius: var(--r-s, 8px);
}
.irt-a-action strong { color: var(--ink, #1A1C22); }

.irt-a-valid { font-size: 14px; font-weight: 600; color: var(--ink-2, #333333); margin-bottom: 10px; }

.irt-a-states { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.irt-chip.irt-sub-btn {
    display: inline-flex; align-items: center; min-height: 36px;
    padding: 4px 12px; border-radius: 999px;
    border: 1px solid var(--brand-text, #B84400);
    background: #FFFFFF; color: var(--brand-text, #B84400);
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background-color .15s ease;
}
.irt-chip.irt-sub-btn:hover { background: var(--brand-tint-50, #FFF3EA); }

.irt-a-desc { margin-bottom: 10px; }
.irt-a-desc summary {
    cursor: pointer; font-size: 14px; font-weight: 600;
    color: var(--brand-text, #B84400); min-height: 44px; display: flex; align-items: center;
}
.irt-a-desc p { font-size: 14px; line-height: 1.6; color: var(--ink-2, #333333); margin: 6px 0 0; }
.irt-a-rawareas { font-style: italic; color: var(--mt, #555555); }

.irt-a-source { font-size: 12px; color: var(--mt, #555555); }

.irt-a-expired { position: relative; opacity: .82; }
.irt-a-expired-ribbon {
    font-size: 12px; font-weight: 700; color: var(--irt-red);
    margin-bottom: 8px; text-transform: uppercase; letter-spacing: .02em;
}
.irt-lastseen-ttl { font-size: var(--fs-h3, 15px); font-weight: 600; color: var(--ink, #1A1C22); margin: 20px 0 10px; }

.irt-clear {
    text-align: center; padding: 32px 16px;
    background: var(--wh, #fff); border: 1px solid var(--bd, #DDDDDD);
    border-radius: var(--r, 12px);
}
.irt-clear-icon { font-size: 32px; margin-bottom: 8px; }
.irt-clear p { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink, #1A1C22); }
.irt-clear-sub { margin-top: 6px !important; font-size: 14px !important; font-weight: 400 !important; color: var(--mt, #555555) !important; }

/* ───────────────────────── PART 5: SUBSCRIBE BAR (F) ─────────────────── */
.irt-sub-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--ink, #1A1C22); color: #FFFFFF;
    padding: 12px 16px; box-shadow: var(--shadow-2, 0 -8px 24px rgba(0,0,0,.2));
}
.irt-sub-bar[hidden] { display: none; }
.irt-sub-bar form {
    max-width: 720px; margin: 0 auto;
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.irt-sub-bar-label { font-size: 14px; flex: 1 1 100%; }
.irt-sub-bar #irtSubEmail {
    flex: 1 1 200px; min-height: 44px; padding: 0 12px;
    border-radius: var(--r-s, 8px); border: 1px solid #555;
    background: #FFFFFF; color: var(--ink-2, #333333); font-size: 15px;
}
.irt-sub-bar-close {
    min-width: 44px; min-height: 44px; border-radius: var(--r-s, 8px);
    border: 1px solid #555; background: transparent; color: #FFFFFF;
    font-size: 16px; cursor: pointer;
}

/* ───────────────────────── PART 6: EXPLAINER ACCORDION (H) ──────────── */
.irt-faq-wrap { margin-top: 8px; }
.irt-faq-list { display: flex; flex-direction: column; gap: 8px; }
.irt-faq-item {
    background: var(--wh, #fff); border: 1px solid var(--bd, #DDDDDD);
    border-radius: var(--r-s, 8px); padding: 4px 14px;
}
.irt-faq-item summary {
    cursor: pointer; min-height: 44px; display: flex; align-items: center;
    font-size: 15px; font-weight: 600; color: var(--ink, #1A1C22);
}
.irt-faq-item p { font-size: 14px; line-height: 1.6; color: var(--ink-2, #333333); margin: 0 0 12px; }
.irt-disclaimer { font-size: 13px; line-height: 1.6; color: var(--mt, #555555); margin-top: 16px; }

/* ───────────────────────── PART 7: BANNER ON CITY/STATE PAGES ────────── */
.irt-alert-banner {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 14px; margin: 12px 0;
    background: var(--wh, #fff); border: 1px solid var(--bd, #DDDDDD);
    border-left: 6px solid var(--ink-disabled, #8C8C8C);
    border-radius: var(--r-s, 8px);
}
.irt-alert-banner-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.irt-alert-banner-text { flex: 1 1 auto; font-size: 14px; color: var(--ink-2, #333333); }
.irt-alert-banner-until { color: var(--mt, #555555); }
.irt-alert-banner-link {
    flex: 0 0 auto; min-height: 36px; display: inline-flex; align-items: center;
    padding: 4px 12px; border-radius: 999px;
    background: var(--brand-text, #B84400); color: #FFFFFF !important;
    font-size: 13px; font-weight: 600; text-decoration: none;
}

/* ───────────────────────── PART 8: SHORTCODE WIDGET ──────────────────── */
.irt-alert-shortcode { display: flex; flex-direction: column; gap: 10px; }
.irt-alert-shortcode .irt-alert-card {
    background: var(--wh, #fff); border: 1px solid var(--bd, #DDDDDD);
    border-left: 6px solid var(--ink-disabled, #8C8C8C);
    border-radius: var(--r-s, 8px); padding: 10px 12px;
}
.irt-alert-shortcode .irt-alert-card.irt-alert-red    { border-left-color: var(--irt-red); }
.irt-alert-shortcode .irt-alert-card.irt-alert-orange { border-left-color: var(--irt-orange); }
.irt-alert-shortcode .irt-alert-card.irt-alert-yellow { border-left-color: var(--irt-yellow); }
.irt-alert-shortcode .irt-alert-badge {
    display: inline-flex; padding: 2px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 700; margin-bottom: 6px;
}
.irt-alert-shortcode .irt-alert-headline { font-size: 14px; font-weight: 600; color: var(--ink, #1A1C22); }
.irt-alert-shortcode .irt-alert-until { font-size: 12px; color: var(--mt, #555555); margin-top: 4px; }

/* ───────────────────────── PART 9: TRENDING ENTRY (homepage) ─────────── */
.irt-alert-trending { display: inline-flex; align-items: center; gap: 6px; }
.irt-alert-trending-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* ───────────────────────── PART 10: REDUCED MOTION ────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .irt-heatmap-cell,
    .irt-btn,
    .irt-chip.irt-sub-btn {
        transition: none !important;
    }
    .irt-heatmap-cell:hover { transform: none; }
}