/* outage.css — the live outage map page. */

.outage-hero {
    background: linear-gradient(135deg, #0B8C38 0%, var(--cfn-green) 60%, #4fb84f 100%);
    color: #ffffff;
    padding: 64px 20px 56px;
    text-align: center;
}

.outage-hero-inner {
    max-width: 720px;
    margin: 0 auto;
}

.outage-hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5.5vw, 3rem);
    line-height: 1.15;
    margin: 0 0 14px;
    color: #ffffff;
}

.outage-hero p {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
}

/* --- The embed ------------------------------------------------------------
   The supplied iframe was width=1024 height=768. Fixed pixels overflow every
   phone screen, so the size is set here instead.

   Height is not an aspect ratio: at 4:3 the map would be ~260px tall on a
   360px phone, which is unusable for reading street-level detail. It gets a
   viewport-relative height with a floor instead, so it stays tall enough to
   pan around on a small screen. */
.outage-map-section {
    padding: 44px 20px 56px;
    background: #f8fafc;
}

.outage-map-inner {
    max-width: 1024px;
    margin: 0 auto;
}

.outage-map-frame {
    /* The embed is drawn at 1024x768. Holding that 4:3 ratio keeps the map in
       its own proportions at every width instead of stretching it, and capping
       the width at its native 1024 stops it being scaled up past the
       resolution it was rendered at. Below 1024 it scales down intact. */
    max-width: 1024px;
    margin-inline: auto;
    aspect-ratio: 4 / 3;
    background: #ffffff;
    border: 1px solid #dbe3ea;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
    line-height: 0;
}

.outage-map-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    /* View only. The map is a status display, not a tool, so pointer input is
       blocked: nobody can pan it out of position, zoom into an unreadable
       state, or click through to the monitoring provider's own site. It also
       stops the frame swallowing page scroll on touch, since the events now
       pass to the page behind it. Keyboard and screen-reader access into the
       frame is deliberately left alone — that is the only way the outage
       information is readable without sight. */
    pointer-events: none;
}

/* --- Map key ------------------------------------------------------------
   Mirrors the legend on the business service-territory map so the two read
   as the same component. Constrained to the map's own width so the key sits
   directly under it rather than running the full section. */
.outage-map-legend {
    max-width: 1024px;
    margin: 18px auto 0;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.outage-map-legend h2 {
    margin: 0 0 12px;
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 1.05rem;
    color: var(--npt-black, #141414);
}

.outage-map-legend .legend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 16px;
}

.outage-map-legend .legend-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* The real map icons rather than colour swatches, so the key matches what is
   actually on the map. They are 24x30 source pixels shown at native size and
   pixelated on scaling, since smoothing a 24px sprite turns the strip to mush. */
.outage-map-legend .legend-icon {
    display: block;
    width: 24px;
    height: 30px;
    flex-shrink: 0;
    image-rendering: pixelated;
    border-radius: 3px;
}

.outage-map-legend .legend-text {
    display: flex;
    flex-direction: column;
    font-size: 0.92rem;
    line-height: 1.4;
}

.outage-map-legend .legend-text strong {
    color: var(--npt-black, #141414);
    margin-bottom: 2px;
}

.outage-map-legend .legend-text span {
    color: #64748b;
    font-size: 0.82rem;
}

/* The point of the key: the strip carries the status, the lights do not. */
.outage-map-legend .legend-note {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid #eef2f6;
    color: #64748b;
    font-size: 0.85rem;
    line-height: 1.5;
}

.outage-fallback {
    margin-top: 18px;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.outage-fallback p {
    margin: 0;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.6;
}

.outage-fallback a {
    color: var(--cfn-dark-green);
    font-weight: 600;
}

/* --- Reporting ------------------------------------------------------------ */
.outage-help {
    padding: 70px 20px 84px;
    background: #ffffff;
}

.outage-help-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.outage-help h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.55rem, 4vw, 2.1rem);
    color: var(--npt-black);
    margin: 0 0 16px;
    line-height: 1.25;
}

.outage-help p {
    color: #475569;
    font-size: 1.04rem;
    line-height: 1.7;
    margin: 0 0 26px;
}

.outage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.outage-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 48px clears the touch-target minimum, which matters more here than on
       most pages: people reach this one on a phone, often in bad weather. */
    min-height: 48px;
    padding: 13px 28px;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s;
}

.outage-btn--primary {
    background: var(--cfn-green);
    color: #ffffff;
}

.outage-btn--primary:hover {
    background: var(--cfn-dark-green);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(3, 166, 60, 0.28);
}

.outage-btn--ghost {
    border: 2px solid #cbd5e1;
    color: var(--npt-black);
}

.outage-btn--ghost:hover {
    border-color: var(--cfn-green);
    color: var(--cfn-dark-green);
}

.outage-hours {
    margin: 22px 0 0;
    color: #64748b;
    font-size: 0.92rem;
}

@media (max-width: 640px) {
    .outage-hero {
        padding: 48px 16px 42px;
    }

    .outage-map-section {
        padding: 30px 14px 40px;
    }

    .outage-help {
        padding: 52px 16px 64px;
    }

    .outage-actions .outage-btn {
        width: 100%;
        max-width: 320px;
    }
}