/*
 * Your global styles here
 */

/* Brand typefaces, self-hosted from the C311Fonts static resource. */
@font-face {
    font-family: "Hind";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/resource/C311Fonts/Hind-SemiBold.woff2) format("woff2");
}

@font-face {
    font-family: "Hind";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/resource/C311Fonts/Hind-Bold.woff2) format("woff2");
}

@font-face {
    font-family: "Martel Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/resource/C311Fonts/MartelSans-Regular.woff2) format("woff2");
}

@font-face {
    font-family: "Martel Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/resource/C311Fonts/MartelSans-SemiBold.woff2) format("woff2");
}

@font-face {
    font-family: "Martel Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/resource/C311Fonts/MartelSans-Bold.woff2) format("woff2");
}

@font-face {
    font-family: "Martel Sans";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(/resource/C311Fonts/MartelSans-Black.woff2) format("woff2");
}

/* Brand palette. Custom properties pierce LWC shadow DOM, so component
   stylesheets reference these instead of hard-coded hex values. */
:root {
    --c311-primary-blue: #206ead;
    --c311-navy: #114681;
    --c311-magenta: #b51b54;
    --c311-magenta-hover: #911643;
    --c311-charcoal: #333b3e;
    --c311-slate: #556468;
    --c311-light-gray: #f4f5f5;
    --c311-border-gray: #dfdfdf;
    --c311-accent-purple: #55437e;
    --c311-accent-olive: #769025;
    --c311-accent-gold: #ffce34;
    --c311-accent-orange: #f68628;
    --c311-accent-lime: #c2ce34;
    --c311-status-new-bg: #eaf4ff;
    --c311-status-in-progress-bg: #fff8f2;
    --c311-status-closed-bg: #f5ffe4;
}

html,
body {
    height: 100%;
}

html {
    background: white;
    /* Stop mobile browsers inflating text on their own; the user's own font
       setting still applies. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
}

/* Full-screen platform dialogs (e.g. the file-upload picker) start below
   the sticky site header on phones so their chrome stays visible and
   tappable. */
@media (max-width: 47.9375em) {
    .slds-modal.slds-modal_full {
        top: 226px !important;
        height: calc(100% - 226px) !important;
    }
}

/* Google translate injects a top banner frame and shoves the body down 40px;
   our footer widget is the only language control, so keep Google's bar hidden. */
iframe.goog-te-banner-frame,
.skiptranslate iframe {
    display: none !important;
}
body {
    top: 0 !important;
}

/* Explore toolbar: the search input paints its own chrome in native shadow (border/background
   unreachable from any stylesheet); height is the one property that applies from here.
   46px matches the Filters control beside it. */
.address-search-shell .slds-input {
    height: 46px !important;
}

/* Phone-width or short (landscape-phone) viewport: collapse the theme header's
   three 12px column spacers — 36px of screen spent before content starts. */
@media (max-width: 767.98px), (max-height: 480px) {
    community_byo-scoped-header-and-footer community_layout-column-spacer {
        display: none;
    }
}

/* Short viewport (phone held sideways): the pinned header would cover most of
   the screen, so let it scroll away; full-screen dialogs then need no offset. */
@media (max-height: 480px) {
    community_byo-scoped-header-and-footer header.sticky-header {
        position: static !important;
    }
    .slds-modal.slds-modal_full {
        top: 0 !important;
        height: 100% !important;
    }
}

/* Short viewport on the Explore map page: that page is viewport-locked (no
   scroll), so a scrolled-away header never leaves — hide it for a full-bleed
   map. The :has() scope releases as soon as the map page unmounts. */
@media (max-height: 480px) {
    :root:has(c-explore-map) community_byo-scoped-header-and-footer header.sticky-header {
        display: none;
    }
}

/* Nav underline (selected + hover): the component falls back to --dxp-g-brand,
   dark blue on the blue header (~1.2:1 contrast — invisible). */
.comm-customizable-navigation-bar {
    --dxp-c-nav-bar-active-line-color: var(--c311-accent-lime);
    --dxp-c-nav-bar-hover-line-color: var(--c311-accent-lime);
}