/* site.css
   Consolidated and polished styles for layout, accessibility, map, forms, and responsive behavior.
   Add this file (or replace existing css/site.css) before pushing.
*/

/* --------------------------
   Base typography and layout
   -------------------------- */
:root {
    --brand-ink: #111;
    --muted: #777;
    --accent: #007bff;
    --bg-overlay: rgba(0,0,0,0.55);
    --control-bg: #fff;
    --control-border: rgba(0,0,0,0.12);
    --radius: 8px;
}

html, body {
    height: 100%;
    margin: 0;
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--muted);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #fff;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--brand-ink);
    margin: 10px 0;
    font-weight: 400;
}

h4 {
    font-weight: 700 !important;
}


/* Azure Map Components */

.azure_map {
    height: 50vh;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}
/*.azure_map_search {
    width: 98.35% !important;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}*/

/* --------------------------
   Parallax backgrounds / hero
   -------------------------- */
.bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bgimg-1 {
    background-image: url('/images/DeRosato_Residential_Asphalt_Paving_Service_10.jpg');
    min-height: 100%;
}

.bgimg-2 {
    background-image: url('/images/DeRosato_Residential_Asphalt_Paving_Service_02.jpg');
    min-height: 80%;
}

.bgimg-3 {
    background-image: url('/images/DeRosato_Residential_Asphalt_Paving_Service_06.jpg');
    min-height: 80%;
}

    /* Hero title container readability */
    .bgimg-1 .w3-display-middle span,
    .bgimg-2 .w3-display-middle span,
    .bgimg-3 .w3-display-middle span {
        background: var(--bg-overlay);
        color: #fff;
        padding: 10px 18px;
        border-radius: var(--radius);
        text-shadow: 0 1px 2px rgba(0,0,0,0.6);
        display: inline-block;
    }

/* --------------------------
   Images and portfolio grid
   -------------------------- */
.w3-image {
    max-width: 100%;
    height: auto;
    display: block;
}

.w3-portfolio-image {
    width: 100%;
    border-radius: 6px;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

    .w3-portfolio-image:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    }

/* --------------------------
   Map and diagnostics
   -------------------------- */
#myMap {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    height: 50vh;
    min-height: 260px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    margin-top: 12px;
    overflow: hidden;
}

/* Map diagnostics box */
#mapDiagnostics {
    position: fixed;
    right: 12px;
    bottom: 12px;
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(0,0,0,0.06);
    padding: 8px 10px;
    font-size: 12px;
    color: var(--brand-ink);
    z-index: 99999;
    max-width: 320px;
    border-radius: 8px;
}

/* reduce footprint on small screens */
@media (max-width:600px) {
    #myMap {
        height: 35vh;
        min-height: 180px;
    }

    #mapDiagnostics {
        right: 8px;
        bottom: 8px;
        max-width: 220px;
        font-size: 11px;
        padding: 6px;
    }
}

/* --------------------------
   Forms, inputs, buttons
   -------------------------- */
.w3-input, select.w3-input, textarea.w3-input {
    width: 100% !important;
    box-sizing: border-box;
    padding: 12px 14px;
    font-size: 16px;
    line-height: 1.4;
    background: var(--control-bg);
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    color: #222;
    transition: box-shadow 160ms ease, border-color 160ms ease;
}

    .w3-input:focus, select.w3-input:focus, textarea.w3-input:focus {
        outline: none;
        box-shadow: 0 0 0 4px rgba(0,123,255,0.08);
        border-color: var(--accent);
    }

/* error text */
.web_email_error {
    color: #c82333;
    font-weight: 600;
    margin-top: 6px;
    text-align: right;
}

/* buttons */
.w3-button {
    border: none;
    padding: 12px 18px;
    cursor: pointer;
    background-color: #000;
    color: #fff;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    transition: background-color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
    -webkit-tap-highlight-color: transparent;
}

    .w3-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(0,0,0,0.08);
    }

    .w3-button:focus {
        outline: 3px solid rgba(0,123,255,0.18);
        outline-offset: 2px;
    }

/* prominent send button */
#sendBtn.w3-button {
    background: linear-gradient(180deg,#111 0%, #000 100%);
    color: #fff;
    padding: 12px 20px;
    border-radius: 10px;
}

/* textarea resizing */
textarea.w3-input {
    min-height: 96px;
    resize: vertical;
}

/* --------------------------
   Layout utilities and responsive
   -------------------------- */
.w3-row {
    box-sizing: border-box;
    clear: both;
}

.w3-col {
    box-sizing: border-box;
    padding: 8px;
}

    .w3-col.m5 {
        width: 40% !important;
        float: left;
    }

    .w3-col.m7 {
        width: 60% !important;
        float: left;
    }

@media (max-width:768px) {
    .w3-col.m5, .w3-col.m7 {
        width: 100% !important;
        float: none;
        padding-left: 12px;
        padding-right: 12px;
    }

    .w3-row .w3-col {
        margin-bottom: 12px;
    }
}

/* small helpers */
.w3-center {
    text-align: center !important;
}

.w3-justify, .w3-text-align-justify {
    text-align: justify !important;
    color: #333;
}

.w3-hide {
    display: none !important;
}

.w3-show {
    display: block !important;
}

.w3-padding-16 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

.w3-padding-32 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
}

.w3-padding-64 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
}

.w3-section {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
}

/* --------------------------
   Modal image viewer
   -------------------------- */
.w3-modal {
    z-index: 3;
    display: none;
    padding-top: 100px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.w3-modal-content {
    margin: auto;
    background: #fff;
    position: relative;
    padding: 0;
    outline: 0;
    width: 720px;
    max-width: 95%;
    border-radius: 10px;
    overflow: hidden;
}

    .w3-modal-content img.w3-image {
        width: 100%;
        height: auto;
        display: block;
    }

/* --------------------------
   Navbar
   -------------------------- */
.w3-top {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: transparent;
}

.w3-bar {
    width: 100%;
    overflow: hidden;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .w3-bar .w3-bar-item {
        padding: 8px 12px;
        display: inline-block;
        color: #fff;
        text-decoration: none;
        font-weight: 600;
    }

        .w3-bar .w3-bar-item:hover {
            opacity: 0.9;
        }

    /* navbar scrolled state style helper */
    .w3-bar.w3-card.w3-white .w3-bar-item {
        color: var(--brand-ink);
    }

/* mobile menu */
#navDemo.w3-bar-block {
    display: none;
    background: #fff;
    position: relative;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    border-radius: 8px;
    padding: 8px;
}

/* --------------------------
   Social sprites / footer
   -------------------------- */
.sprite_facebook, .sprite_linkedin, .sprite_twitter, .sprite_youtube, .sprite_pinterest {
    width: 28px;
    height: 28px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

.sprite_fallback {
    background-color: #eee;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    display: inline-block;
}

/* footer */
footer {
    background: #000;
    color: #fff;
    padding: 36px 18px;
    text-align: center;
}

    footer a {
        color: #fff;
        text-decoration: none;
        margin: 0 8px;
        display: inline-block;
    }

/* --------------------------
   Accessibility utilities
   -------------------------- */
.visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px,1px,1px,1px);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
}

/* ensure focusable elements have visible outlines */
a:focus, button:focus, input:focus, select:focus, textarea:focus {
    outline-offset: 3px;
}

/* --------------------------
   Small UX niceties
   -------------------------- */
#menuToggle {
    display: inline-block;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
}

    #menuToggle:focus {
        outline: 3px solid rgba(0,123,255,0.14);
    }

/* improve hero/title stacking */
.w3-title-1, .w3-title-2, .w3-title-3 {
    white-space: nowrap;
    margin-top: 0;
}

/* slightly larger tap targets for mobile */
@media (max-width:600px) {
    .w3-button {
        padding: 14px 18px;
        font-size: 16px;
    }

    .w3-row .w3-col {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* --------------------------
   Performance / debug helpers
   -------------------------- */
/* keep diagnostics readable in narrow widths */
#lastResponse {
    max-height: 160px;
    overflow: auto;
    white-space: pre-wrap;
    font-size: 12px;
}

/* --------------------------
   Backward compatibility fallbacks
   -------------------------- */
/* older browsers that ignore modern properties should still see decent UI */
@supports (not (display: grid)) {
    .w3-col {
        display: block;
    }
}

/* --------------------------
   End of file
   -------------------------- */