/* Reset */
body, h1, h2, h3, p, ul, ol { margin:0; padding:0; }
body { display:flex; flex-direction:column; min-height:100vh; font-family:sans-serif; background-color:#d0e8f2; }

/* Header Top */
.header-top { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; padding:10px 20px; background-color:#d0e8f2; }
.top-container-hdr { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; flex-grow:1; padding:10px; }
.left-container-hdr, .middle-container-hdr, .right-container-hdr { flex:1; display:flex; align-items:center; }
.left-container-hdr { justify-content:flex-start; } .middle-container-hdr { justify-content:space-between; } .right-container-hdr { justify-content:space-around; }
.logo img { max-width:100%; height:auto; }
.company-name a { font-family:"Blackadder ITC", cursive; font-size:50px; color:#05a792; text-decoration:none; }

/* Header Bottom */
.header-bottom { display:flex; justify-content:space-around; align-items:center; flex-wrap:wrap; background-color:#d0e8f2; padding:10px; }
.horizontal-menu { display:flex; background-color:#d0e8f2; padding:20px 10px; justify-content:space-between; align-items:center; flex-wrap:wrap; position:relative; z-index:10; }
.horizontal-menu ul { list-style:none; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; }
.horizontal-menu ul li { margin:0 5px; white-space:nowrap; text-align:center; padding:20px 10px; background-color:#56e3e8; border-radius:10px; }
.horizontal-menu ul li a { color:#422c0b; text-decoration:none; font-size:18px; display:flex; align-items:center; }
.horizontal-dropdown-menu { display:none; position:absolute; background-color:#f9f9f9; min-width:160px; box-shadow:0px 8px 16px rgba(0,0,0,0.2); z-index:10; }
.horizontal-dropdown-menu a { color:black; padding:8px 12px; text-decoration:none; display:block; font-size:16px; background-color:#f1f1f1; }
.horizontal-dropdown:hover .horizontal-dropdown-menu { display:block; }

/* Vertical Dropdown */
.vertical-dropdown-container { position:relative; }
.vertical-dropdown-menu { display:none; position:absolute; top:100%; left:0; background-color:#f9f9f9; min-width:160px; box-shadow:0 8px 16px rgba(0,0,0,0.2); z-index:10; }
.vertical-dropdown-menu a { color:black; padding:12px 16px; text-decoration:none; display:block; }
.vertical-dropdown-container:hover .vertical-dropdown-menu,
.table-of-contents:hover .vertical-dropdown-menu,
.table-of-contents:focus-within .vertical-dropdown-menu { display:block; }

/* Scene */
.scene { max-width:1200px; width:90vw; margin:2rem auto; display:flex; justify-content:center; align-items:center; background:#d0e8f2; position:relative; z-index:1; }
svg { max-width:100%; height:auto; display:block; }
#scene { pointer-events:visiblePainted; }
#scene a, #scene .clickable, #scene text { pointer-events:all; cursor:pointer; }
#scene a:hover, #scene .clickable:hover { cursor:pointer; filter:brightness(1.2); }

/* Buildings & Objects */
.building { fill:url(#brickPattern); stroke:#8b4513; stroke-width:3px; rx:10; ry:10; }
.tree-foliage { fill:#228b22; stroke:#176217; stroke-width:3; }
.window { fill:#87ceeb; stroke:#333; stroke-width:3px; rx:6; ry:6; }
.window-pane { fill:none; stroke:#333; stroke-width:1.5px; }
.sill { fill:#c0c0c0; }
.flowerpot { fill:#8b4513; stroke:#5a2a07; stroke-width:2px; rx:6; ry:6; }
.flowerpot-text, .door-sign-text { fill:white; font-family:sans-serif; font-weight:600; font-size:12px; pointer-events:all; }
.flower { fill:green; stroke:darkgreen; stroke-width:1; }
.door { fill:#654321; stroke:#3b2a1a; stroke-width:3px; rx:6; ry:6; }
.door-panel { fill:#855e42; }
.door-knob { fill:gold; stroke:#333; stroke-width:1; }
.step { fill:#aaa; }
.store { fill:#ffdead; stroke:#8b7d6b; stroke-width:1px; rx:12; ry:12; }
.billboard-post { fill:#999; }

/* Responsive */
@media screen and (max-width:1200px){ #scene{width:100%;height:auto;} .building{width:80%;} }
@media screen and (max-width:800px){
  header, .header-top, .header-bottom, .horizontal-menu { flex-direction:column; align-items:center; }
  .horizontal-menu ul { flex-direction:column; gap:5px; }
  .horizontal-menu ul li { padding:10px; width:100%; }
}