/* Global resets for single-page layout */
:root{
    --dark-blue:#0b2340;
    --accent:#ffd100;
    --btn-bg:#1a73e8;
}

/* Desktop explicit rule: ensure inline nav is visible and burger hidden at >=769px */
@media (min-width:769px){
    .nav-menu{display:flex;flex-direction:row}
    .burger{display:none}
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Segoe UI, Roboto, system-ui, -apple-system, 'Helvetica Neue', Arial;background:var(--dark-blue)}

/* Header variables used to ensure main content is always pushed below header */
:root{--header-height:72px;--mobile-menu-height:220px}

/* TOP NAVIGATION */
.site-header{
    /* Fixed header: prevents overlap by sitting above all content */
    position:fixed;
    top:0;left:0;right:0;
    height:var(--header-height);
    background-color:#0b2340; /* solid dark bg to ensure readability */
    z-index:1000; /* higher than hero/background */
    display:flex;align-items:center;
}
.nav-overlay{padding:0}
.nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;height:var(--header-height);padding:0 16px;box-sizing:border-box}
.logo{display:flex;align-items:center;flex:0 0 auto}
.logo-img{max-height:56px;display:block}
.nav-menu{display:flex;gap:24px;align-items:center;white-space:nowrap;list-style:none;margin:0;padding:0}
.nav-menu li{margin:0}
.nav-menu a{color:#ffffff;text-decoration:none;font-weight:600;padding:8px 12px;display:inline-block}
.nav-menu a:hover,.nav-menu a:focus{opacity:0.9}

/* nav-controls groups the inline links and the single burger button */
.nav-controls{display:flex;align-items:center;gap:8px;position:relative}

/* Single hamburger button: hidden on desktop, visible on mobile. Positioned at the far right inside nav-controls. */
.burger{display:none;background:transparent;border:0;color:#ffffff;font-size:26px;cursor:pointer;padding:10px;position:relative;z-index:1100;-webkit-appearance:none;border-radius:8px;transition:background-color 160ms ease, transform 120ms ease}
.burger:focus{outline:none}
.burger:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,0.12);}

/* Visual icon lines created via pseudo elements for flexibility */
.burger-icon{display:inline-block;width:22px;height:16px;position:relative}
.burger-icon::before,.burger-icon::after,.burger-icon span{content:"";position:absolute;left:0;right:0;height:2px;background:#ffffff;border-radius:2px;transition:transform 200ms ease, opacity 160ms ease}
.burger-icon::before{top:0}
.burger-icon span{top:7px}
.burger-icon::after{bottom:0}

/* Hover / active affordance */
.burger:hover{background:rgba(255,255,255,0.04)}
.burger:active{transform:translateY(1px)}

/* When menu is open (aria-expanded=true), show X by rotating lines */
.burger[aria-expanded="true"]{background:rgba(255,255,255,0.06)}
.burger[aria-expanded="true"] .burger-icon::before{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] .burger-icon span{opacity:0}
.burger[aria-expanded="true"] .burger-icon::after{transform:translateY(-7px) rotate(-45deg)}

/* Mobile dropdown behavior handled in the mobile media query below to avoid conflicts with desktop styles. */

/* Ensure main content is pushed down by header height to avoid overlap */
main{padding-top:var(--header-height);transition:padding-top 220ms ease}

/* When mobile menu is open, main gets extra padding; controlled by Blazor adding class 'menu-open' to main */
main.menu-open{padding-top:calc(var(--header-height) + var(--mobile-menu-height))}

/* HERO SECTION */
.hero-section{height:65vh;display:flex;align-items:center;justify-content:center;position:relative;background-image: url('/images/hero-aerial.jpg'), url('/images/hero-estate.jpg'), url('/hero-aerial.jpg'), url('/images/hero.jpg'), url('/hero.jpg'), url('/images/hero.jpg'), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='800'><rect width='100%25' height='100%25' fill='%23767676'/><text x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='Segoe%20UI,Roboto,Arial' font-size='36' fill='%23ffffff'>Housecore Property</text></svg>");background-size:cover;background-position:center;background-color:#666}
.hero-section::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,0.55),rgba(0,0,0,0.55));}
.hero-overlay{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;padding:0 20px}
.hero-title{font-size:40px;margin:0 0 10px;font-weight:700}
.hero-sub{font-size:18px;margin:0 0 18px}
.hero-down{margin-top:28px;color:#fff;font-size:28px;opacity:0.9}

/* OUR STORY */
.our-story{background:var(--dark-blue);color:#fff;padding:80px 20px;position:relative}
.story-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.story-image{height:360px;background-image: url('/images/interior.jpg'), url('/images/interior.jpeg'), url('/interior.jpg'), url('/images/interior.jpeg'), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='360'><rect width='100%25' height='100%25' fill='%23172b3b'/><text x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='Segoe%20UI,Roboto,Arial' font-size='20' fill='%23cfd8dc'>Interior image</text></svg>");background-repeat:no-repeat;background-size:cover;background-position:center;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,0.5);transform:translateY(-40px);overflow:hidden;display:block}
.story-card{background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));padding:28px;border-radius:8px;transform:translateY(-40px)}
.story-card h2{margin-top:0;font-size:28px}
.story-card p{line-height:1.6}
.btn{border:0;padding:12px 20px;border-radius:28px;cursor:pointer;font-weight:700}
.btn-primary{background:#ffd100;color:#0b2340}
.btn-primary:hover{opacity:0.95}

/* OUR CLIENTS */
.our-clients{background-image:url('/images/building-plan.jpeg');background-size:cover;background-position:center;padding:80px 40px;position:relative;color:#fff;overflow:hidden}
.our-clients::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(4,8,16,0.68),rgba(4,8,16,0.68));z-index:1;pointer-events:none}
.our-clients .section-title{text-align:center;font-size:24px;margin:0 0 28px;font-weight:800;position:relative;z-index:2}

/* START OUR CLIENTS STYLES - Scoped to this section */
.our-clients .clients-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:stretch;position:relative;z-index:2}
.our-clients .client-card{background:rgba(255,255,255,0.04);backdrop-filter:blur(6px);border-radius:12px;padding:22px 18px;display:flex;flex-direction:column;align-items:center;gap:12px;border:1px solid rgba(255,255,255,0.06);transition:transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease}
.our-clients .client-card:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(3,10,25,0.45);border-color:rgba(0,209,166,0.85)}
.our-clients .client-icon{width:120px;height:120px;display:flex;align-items:center;justify-content:center}
.our-clients .client-icon svg{width:96px;height:96px}
/* Ensure strokes are visible and thicker by default */
.our-clients .client-icon svg path,
.our-clients .client-icon svg rect,
.our-clients .client-icon svg circle{stroke:#ffffff;stroke-width:2.4;fill:none;transition:stroke 220ms ease}
.our-clients .client-card:hover .client-icon svg path,
.our-clients .client-card:hover .client-icon svg rect,
.our-clients .client-card:hover .client-icon svg circle{stroke:#00d1a6}
.our-clients .client-title{text-transform:uppercase;color:#00d1a6;font-weight:800;letter-spacing:1px;font-size:13px;margin-top:6px;text-align:center}

/* Responsive grid */
@media (max-width:900px){
    .our-clients .clients-grid{grid-template-columns:repeat(2,1fr);gap:20px}
}
@media (max-width:600px){
    .our-clients{padding:36px 16px}
    .our-clients .clients-grid{grid-template-columns:1fr;gap:16px}
    .our-clients .client-icon{width:88px;height:88px}
    .our-clients .client-icon svg{width:64px;height:64px}
}
/* END OUR CLIENTS STYLES */
/* NEW PROPERTY AVAILABLE */
.new-property{background-image:url('/images/new-property.png');background-repeat:no-repeat;background-size:cover;background-position:center;padding:100px 20px;position:relative;color:#fff}
.new-property::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.55),rgba(0,0,0,0.55));}
.new-overlay{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column}
.new-inner{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:18px;transform:translateY(-12px)}
.small-heading{letter-spacing:2px;font-size:32px;margin:-10px 0 12px;font-weight:900;text-transform:uppercase}
.new-details{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px;width:100%;max-width:1100px}
.prop-block{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.new-left .prop-title,.new-right .prop-title{font-size:24px;margin:0;font-weight:700;letter-spacing:0.4px;color:#fff}
.prop-icon{display:flex;align-items:center;justify-content:center;height:80px;width:100%}
.prop-icon img{display:block;margin:0 auto;max-width:120px;height:auto}
.house-icon{width:60px;height:60px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.04);border-radius:12px;padding:8px}
.house-icon svg{width:36px;height:36px;fill:#00d1a6}
.new-cta{margin-top:18px}
.btn-cta{background:#ffd100;color:#0b2340;padding:14px 34px;border-radius:28px;font-weight:800}
.uhuru-logo{max-width:120px;display:block;margin:0 auto}

@media (max-width:900px){
    .new-details{grid-template-columns:1fr;gap:10px}
    .small-heading{font-size:20px}
    .new-left .prop-title,.new-right .prop-title{font-size:18px}
    .house-icon{width:48px;height:48px}
    .house-icon svg{width:24px;height:24px}
    .uhuru-logo{max-width:130px}
}

/* SERVICES */
.services{background:var(--dark-blue);color:#fff;padding:80px 20px}
.services .section-title{font-size:28px;text-align:center;margin:0 0 28px;letter-spacing:2px;font-weight:800}
.services h1.section-title{font-size:36px}
.services-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.service-card{background:#f1f4f6;padding:24px;border-radius:8px;display:flex;flex-direction:column;align-items:center;text-align:center;color:#0b2340}
.service-icon{font-size:48px;margin-bottom:18px;color:var(--dark-blue);display:flex;align-items:center;justify-content:center;height:88px;width:88px}
.service-icon svg{width:48px;height:48px}
.service-card h3{margin:8px 0}
.btn-secondary{background:var(--accent);border:0;color:#0b2340;padding:10px 18px;border-radius:20px;margin-top:12px;font-weight:700}

/* REACH US */
.reach-us{
    /* use architectural background image with dark overlay */
    background-image: url('/images/building-plan.jpeg');
    background-size: cover;
    background-position: center;
    position: relative;
    padding:80px 20px;
    width:100%;
    box-sizing:border-box;
    overflow: hidden;
}
.reach-us::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(11,35,64,0.64), rgba(11,35,64,0.64));
    z-index: 1;
    pointer-events: none;
}
.reach-inner{max-width:700px;margin:0 auto;color:#ffffff;text-align:center;position:relative;z-index:2}
.reach-title{color:#ffffff;margin:0 0 8px;font-size:28px;letter-spacing:3px;font-weight:800}
.reach-sub{color:rgba(255,255,255,0.85);margin:0 0 20px}

.contact-card{background:#ffffff;padding:22px;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,0.08)}
.contact-form{display:flex;flex-direction:column;gap:14px}
.form-field input,.form-field textarea{width:100%;padding:12px 14px;border-radius:8px;border:1px solid #cfcfcf;background:#ffffff;color:#0b2340;font-size:15px}
.form-field textarea{resize:vertical}
.form-actions{text-align:center;margin-top:6px}
.reach-submit{background:#ffd100;color:#0b2340;border:0;padding:12px 28px;border-radius:999px;font-weight:800;cursor:pointer}

@media(max-width:700px){
    .reach-inner{padding:0 12px}
}

/* Responsive adjustments for medium screens */
@media (max-width:900px){
    .story-inner{grid-template-columns:1fr;}
    .clients-grid{grid-template-columns:repeat(2,1fr)}
    .services-inner{grid-template-columns:1fr}
    .nav-inner{padding:0}
    .hero-title{font-size:36px}
}

/* Mobile layout and navigation: breakpoint at 768px
   - .nav-links (the single <ul>) is hidden by default on mobile
   - .burger is displayed (single hamburger on far right)
   - When Blazor sets .open on .nav-links, the dropdown is shown below the header
   - main.menu-open increases top padding so content is pushed down (prevent overlap)
*/
@media (max-width:768px){
    .nav-inner{height:64px;padding:0 12px}
    .logo-img{max-height:48px}

    /* Hide inline menu list on mobile; show single burger icon */
    .nav-menu{display:none}
    .burger{display:flex}

    /* Dropdown menu shown when .open class is present */
    .nav-menu.open{
        display:flex; /* required: show as flex column when open */
        flex-direction:column;
        position:fixed;
        left:0;right:0;top:var(--header-height);
        width:100%;
        max-height:calc(100vh - var(--header-height));
        overflow:auto;
        background-color:#0b2340; /* solid background */
        z-index:1200; /* above other content, higher than header hero */
        padding:8px 12px;box-sizing:border-box;
        -webkit-overflow-scrolling:touch;
    }
    .nav-menu.open li{display:block}
    .nav-menu.open a{display:block;padding:12px 10px;border-bottom:1px solid rgba(255,255,255,0.04)}

    /* When mobile menu is open, ensure content is pushed down (prevent overlap). main gets .menu-open via Blazor when isMenuOpen=true */
    main.menu-open{padding-top:calc(var(--header-height) + var(--mobile-menu-height))}

    /* Reduce hero height and improve touch targets */
    .hero-section{height:56vh}
    .hero-title{font-size:28px}
    .hero-sub{font-size:15px}
    .form-field input,.form-field textarea{padding:14px 16px;font-size:16px}
    .reach-submit{padding:14px 22px}
}

/* Desktop explicit rule: ensure inline nav is visible and burger hidden at >=768px */
@media (min-width:768px){
    .nav-menu{display:flex}
    .burger{display:none}
}

/* Strong overrides to ensure mobile dropdown shows when .open is applied by Blazor state.
   Placed at end of file so they override earlier rules. */
@media (max-width:768px){
    /* hide inline menu by default on mobile */
    .nav-menu{display:none !important}

    /* show dropdown when Blazor adds .open to the element */
    .nav-menu.open{
        display:flex !important;
        flex-direction:column;
        position:fixed;
        top:var(--header-height);
        left:0;
        right:0;
        width:100%;
        max-height:calc(100vh - var(--header-height));
        overflow:auto;
        background-color:#0b2340;
        z-index:2500; /* above all content */
        padding:8px 12px;
        box-sizing:border-box;
    }
    .nav-menu.open li{display:block}
    .nav-menu.open a{display:block;padding:12px 10px;border-bottom:1px solid rgba(255,255,255,0.04)}

    /* ensure hamburger is visible on mobile */
    .burger{display:flex !important}
}

@media (min-width:769px){
    /* desktop: show inline menu and hide burger */
    .nav-menu{display:flex !important;flex-direction:row}
    .burger{display:none !important}
}