/*
 * Extracted styles from the original inline <style> block in index.html.
 * Serving these styles from a dedicated file allows the CSP to prohibit
 * inline styles and leverages browser caching for improved performance.
 */
body { margin:0; font-family: Arial, sans-serif; line-height:1.5; }
nav { display:flex; align-items:center; justify-content:space-between; padding:10px 20px; background:#083d77; color:white; flex-wrap: wrap; }
.left-nav { display:flex; align-items:center; flex-wrap:wrap; gap:20px; }
/* Remove explicit right margins on anchor tags; spacing is now handled
   via the gap on the parent flex container. */
nav a { color:white; text-decoration:none; margin:0; font-weight:bold; }
/*
 * Style the language selector so it visually blends into the navigation bar.
 * A dark background and light text help it feel like part of the navbar
 * instead of a separate form element. A subtle border adds definition
 * without calling attention to itself. The width is kept minimal to
 * accommodate the six available languages.
 */
nav select {
    margin-right:20px;
    padding:5px;
    border-radius:4px;
    background:rgba(255,255,255,0.15);
    /* Keep the selected language text visible against the dark bar */
    color:#fff;
    border:1px solid rgba(255,255,255,0.5);
    appearance:none;
}
/* Style drop‑down options to ensure they are visible when the menu opens */
nav select option {
    background:#fff;
    color:#000;
}

/*
 * Hide honeypot fields used for spam prevention.  These inputs are
 * intentionally hidden from users and bots by applying a display:none
 * rule.  Using a CSS class rather than inline styles allows the
 * Content‑Security‑Policy to disallow 'unsafe-inline' styles while
 * still concealing the honeypot fields.
 */
.honeypot {
    display: none !important;
}

/*
 * Utility class to visually hide elements while keeping them
 * accessible to screen readers.  This is used for form labels so the
 * form remains uncluttered but still passes accessibility audits.
 */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Dropdown styling for the pricing menu. The parent .dropdown holds
   relative positioning so the child .dropdown-content can be absolutely
   positioned beneath it. On hover the hidden menu becomes visible. */
.dropdown {
    position: relative;
}
.dropdown-content {
    display: none;
    position: absolute;
    background:#083d77;
    min-width:160px;
    top:100%;
    left:0;
    z-index:1;
    border-radius:0 0 4px 4px;
}
.dropdown-content a {
    display:block;
    padding:10px 20px;
    color:white;
    white-space:nowrap;
}
.dropdown:hover .dropdown-content {
    display:block;
}
.dropdown-content a:hover {
    background:rgba(255,255,255,0.1);
}

/* Footer styling. This contains only the copyright; contact details live in a separate bar above. */
.footer {
    /* Match the primary blue used in the navigation bar */
    background:#083d77;
    color:#fff;
    padding:20px;
    text-align:center;
    font-size:14px;
}
/* Links within the footer use a lighter green hue */
.footer a { color:#e6f5ea; text-decoration:underline; }
.footer a:hover { text-decoration:none; }

/* Removed documents button styling. */

/* Bar that displays contact information above the footer. Use a white background
   so it stands apart from the dark footer. Center the text and allow links
   to stand out with the primary blue colour. */
.contact-info {
    background:#fff;
    padding:20px;
    text-align:center;
    font-size:14px;
}
.contact-info a { color:#083d77; text-decoration:underline; }
.contact-info a:hover { text-decoration:none; }
/* Logo styling to display the company logo in the navigation bar */
.logo {
    height: 40px;
    width: auto;
    margin-right: 15px;
}
.container { padding:20px; max-width:1200px; margin:0 auto; }
.hero {
    padding:40px 20px;
    background:linear-gradient(rgba(8,61,119,0.6), rgba(8,61,119,0.6)), url('../cleaning-hero.webp');
    background-size:cover;
    color:white;
    text-align:center;
}
.hero h1 { margin-top:0; font-size:36px; }
.hero p { font-size:18px; }
.hero button {
    margin-top:20px;
    padding:10px 20px;
    font-size:18px;
    background:#ffcc00;
    border:none;
    border-radius:4px;
    cursor:pointer;
}
.services, .why-us { margin-top:40px; }
.services h2, .why-us h2 { margin-top:0; }
.service-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap:20px;
}
.service-card {
    border:1px solid #ddd;
    padding:15px;
    border-radius:6px;
    background:#fafafa;
}
.service-card h3 {
    margin-top:0;
    display:flex;
    align-items:center;
}
.service-card span.icon {
    margin-right:8px;
    font-size:24px;
}
.why-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:20px;
}
.why-card {
    background:#f5f5f5;
    padding:15px;
    border-radius:6px;
    text-align:center;
}
.contact {
    margin-top:40px;
    background:#f8f8f8;
    padding:30px;
    border-radius:6px;
}
.contact form {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:15px;
}
.contact input, .contact textarea, .contact select {
    padding:8px;
    border:1px solid #ccc;
    border-radius:4px;
    width:100%;
}
.contact button {
    grid-column:1 / -1;
    padding:10px 20px;
    background:#083d77;
    color:white;
    border:none;
    border-radius:4px;
    font-size:16px;
    cursor:pointer;
}
@media(max-width:600px) {
    nav { flex-direction: column; align-items: flex-start; }
    /* Stack the logo and links vertically with a reduced gap */
    .left-nav { flex-direction: column; align-items: flex-start; gap: 10px; }
    nav a { margin:0; }
    nav select { margin:5px 0; }
    .contact form { grid-template-columns:1fr; }
}
/* Additional mobile adjustments: reduce hero text sizes and force single-column
   layouts for the service and why-us grids on narrow screens. */
@media (max-width:600px) {
    /* Scale down hero heading and paragraph for better readability */
    .hero h1 { font-size:28px; }
    .hero p { font-size:16px; }
    .hero button { font-size:16px; padding:10px 16px; }
    /* Force service and why-us sections to a single column on very
       narrow screens.  Although auto-fit with minmax handles most
       cases, explicitly setting one column ensures consistent
       spacing when there isn’t room for multiple cards. */
    .service-grid { grid-template-columns:1fr; }
    .why-grid { grid-template-columns:1fr; }
}

/* Styles for the mobile navigation hamburger and phone button.  These controls
   are hidden on larger screens and become visible on screens 600px wide
   or smaller.  The phone button is styled like a miniature CTA so it is
   obvious and easy to tap, and it dials the business number when
   activated. */
.phone-button,
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    margin-left: 10px;
    padding: 5px;
}
/* Style the phone button itself: use the brand accent colour and bold
   text to create a clear, clickable element rather than just an icon. */
.phone-button {
    background: #ffcc00;
    color: #083d77;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
}
@media (max-width:600px) {
    /* Make the nav container positioning relative so that the mobile
       menu can be absolutely positioned underneath it */
    nav {
        position: relative;
        flex-direction: row;
        align-items: center;
    }
    /* Hide navigation links by default on small screens.  Position them
       absolutely beneath the header row so they slide down without
       disrupting the call button or language selector. */
    .left-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        flex-direction: column;
        margin: 0;
        gap: 10px;
        background: #083d77;
        padding: 10px 0;
        z-index: 1000;
    }
    nav.menu-open .left-nav {
        display: flex;
    }
    /* Display the phone button and menu toggle on small screens */
    .phone-button,
    .menu-toggle {
        display: inline-block;
    }
}

/* Style the inline Pricing Guide link.  It appears next to the Pricing
   nav item with a small arrow to clearly indicate a related page. */
.price-guide-inline {
    display: inline;
}
/* Always hide the dropdown content because the inline link replaces it
   on both desktop and mobile. */
.dropdown-content {
    display: none !important;
}