html, body {
    height: 100%;
    font-family: 'Poppins', 'Roboto', sans-serif;
}

h1, h2, h3, .mud-typography-h3, .mud-typography-h4, .mud-typography-h6 {
    font-family: 'Baloo 2', 'Poppins', sans-serif;
}

.mud-text-white {
    color: #ffffff !important;
}

a, .mud-link {
    text-decoration: none;
}

.rounded-lg {
    border-radius: 12px;
}

/* --- Sorsogon "Kasanggayahan" accent — a nod to the province's festival
   colors (sunrise orange, gold, and sea green) used as a decorative strip
   under the app bar and along hero/footer edges. --- */
.sorsogon-accent-bar {
    height: 6px;
    width: 100%;
    background: linear-gradient(90deg, #C0392B 0%, #E67E22 20%, #F4B400 40%, #F9A825 55%, #2E7D32 75%, #00695C 100%);
}

.sorsogon-hero {
    background: linear-gradient(135deg, #05445E 0%, #0B6E8C 55%, #189AB4 100%);
    position: relative;
    overflow: hidden;
}

    .sorsogon-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle at 85% 20%, rgba(249, 168, 37, 0.25), transparent 45%), radial-gradient(circle at 10% 90%, rgba(255, 255, 255, 0.12), transparent 40%);
        pointer-events: none;
    }

.sorsogon-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 0.8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* --- Interactive Sorsogon attraction map --- */
.sorsogon-map-wrap {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(11, 61, 76, 0.2);
}

.sorsogon-map-svg {
    display: block;
    width: 100%;
    height: auto;
}

.sorsogon-map-shape {
    fill: #FFFFFF;
    fill-opacity: 0;
    stroke: rgba(255, 255, 255, 0.55);
    stroke-width: 1.1;
    stroke-linejoin: round;
    pointer-events: all;
    transition: fill-opacity 120ms ease, stroke 120ms ease;
}

.sorsogon-map-pin:hover .sorsogon-map-shape,
.sorsogon-map-pin:focus-visible .sorsogon-map-shape {
    fill-opacity: 0.22;
    stroke: #FFFFFF;
}

.sorsogon-map-pin-active .sorsogon-map-shape {
    fill: #E67E22;
    fill-opacity: 0.28;
    stroke: #FFFFFF;
}

.sorsogon-map-pin:focus {
    outline: none;
}

.sorsogon-map-pin:focus-visible {
    outline: none;
}

    .sorsogon-map-pin:focus-visible .sorsogon-map-shape {
        stroke-width: 2;
    }

.sorsogon-map-pin-ring {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 2;
    transition: r 120ms ease;
}

.sorsogon-map-pin-dot {
    fill: #0B3D4C;
    transition: r 120ms ease, fill 120ms ease;
}

.sorsogon-map-pin-label {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
    fill: #FFFFFF;
    paint-order: stroke;
    stroke: #0B3D4C;
    stroke-width: 3px;
    stroke-linejoin: round;
    pointer-events: none;
}

.sorsogon-map-context-label {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    fill: rgba(255, 255, 255, 0.75);
}

.sorsogon-map-pin:hover .sorsogon-map-pin-ring,
.sorsogon-map-pin:focus .sorsogon-map-pin-ring {
    r: 7;
}

.sorsogon-map-pin:hover .sorsogon-map-pin-dot,
.sorsogon-map-pin:focus .sorsogon-map-pin-dot {
    r: 4;
    fill: #E67E22;
}

.sorsogon-map-pin-active .sorsogon-map-pin-ring {
    r: 7;
}

.sorsogon-map-pin-active .sorsogon-map-pin-dot {
    r: 4;
    fill: #C0392B;
}

/* --- Map + intro-text panel ---
   First pass used `flex: 1 1 X` on both columns, but the map column had a
   max-width cap and the text column didn't — so once the map hit its cap,
   every extra pixel of a wide card kept flowing into the text column,
   stretching it into a huge, mostly-empty block with the copy stranded in
   its top-left corner. Fix: give BOTH columns a capped width via grid, and
   center the whole two-column group with `justify-content:center` so any
   leftover width becomes symmetric outer margin instead of being dumped
   into one column. */
.sorsogon-map-panel {
    display: grid;
    grid-template-columns: minmax(160px, 260px) minmax(260px, 460px);
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.sorsogon-map-panel-map {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}

@media (max-width: 700px) {
    .sorsogon-map-panel {
        grid-template-columns: minmax(0, 320px);
        justify-items: center;
        text-align: center;
        gap: 16px;
    }

    .sorsogon-map-panel-map {
        max-width: 320px;
    }
}

/* Compact variant for the listing pages (Accommodations/Attractions), where
   the map sits above an existing search box rather than inside a big hero,
   so both columns stay narrower than the homepage version. */
.sorsogon-map-panel-compact .sorsogon-map-panel {
    grid-template-columns: minmax(140px, 200px) minmax(220px, 340px);
}

.sorsogon-map-panel-compact .sorsogon-map-panel-map {
    max-width: 340px;
}

/* The outer card was a full-width MudPaper, so even a centered grid inside
   it left large plain margins on both sides. Capping the CARD's own width
   and centering the card itself removes that outer margin instead of just
   redistributing it — the box now hugs its content. */
.sorsogon-map-card {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.sorsogon-map-panel-compact {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 700px) {
    .sorsogon-map-card,
    .sorsogon-map-panel-compact {
        max-width: 100%;
    }
}