/* _style.css */
:root{
  --maroon:#CCCACA; /* dark red background */
  --maroon-dark:#611; /* nav dark */
  --accent:#8b0000;
  --content-bg:#fff;
  --muted:#eee;
  --footer:#3a0000;
  --text:#222;
  --max-width:1100px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  background:var(--maroon);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}





.site-top{
  background:#fff;
  padding:8px 0; /* allow taller header when wrapped */
  box-sizing:border-box;
}
.top-inner{
  max-width:var(--max-width);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  gap:12px;
  box-sizing:border-box;
}

/* allow branding area to wrap and let children shrink */
.branding{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;   /* enables sitename to move to next line */
  min-width:0;      /* allow children to shrink inside flex container */
}

/* responsive logo rather than fixed 96x96 */
.logo{
  width:auto;
  max-width:96px;
  max-height:56px;  /* reduce so text has room */
  height:auto;
  object-fit:contain;
  flex:0 0 auto;
}

/* allow sitename to wrap and shrink */
.sitename{
  font-weight:700;
  font-size:18px;
  color:#0b0b0b;
  white-space:normal;    /* allow wrapping */
  word-break:break-word; /* break long words if necessary */
  flex:1 1 auto;         /* let it grow and shrink */
  min-width:0;           /* critical: allows flex child to shrink */
  line-height:1.1;
}

/* info icon */
.top-icon{
  width:32px;height:32px;border-radius:50%;
  background:#0b6bd6;color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700; font-size: 32px;
}

.top-icon a{
  width:28px;height:28px;border-radius:50%;
  background:#0b6bd6;color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;
  text-decoration: none;
}




/* make text a bit smaller on very small screens */
@media (max-width:380px){
  .sitename{font-size:16px;}
  .logo{max-height:48px;}
}





/* Navigation */
.navbar{
  background:var(--maroon-dark);
  box-shadow:0 1px 0 rgba(0,0,0,0.2) inset;
}
.nav-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:8px 16px;
}
.nav{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.nav > li{position:relative}
.nav > li > a{
  display:block;
  padding:10px 14px;
  color:#fff;
  text-decoration:none;
  border-radius:3px;
  background:transparent;
}
.nav > li > a:hover{background:rgba(255,255,255,0.06)}

/* Dropdown */
.nav li .submenu{
  display:none;
  position:absolute;
  left:0;
  top:100%;
  background:var(--maroon-dark);
  padding:8px 0;
  min-width:180px;
  box-shadow:0 6px 18px rgba(0,0,0,0.4);
  border-radius:4px;
  z-index:40;
}
.nav li:hover .submenu,
.nav li:focus-within .submenu{display:block}
.submenu a{
  display:block;
  padding:8px 12px;
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
}
.submenu a:hover{background:rgba(255,255,255,0.08)}

/* Container / Content card */
.container{
  max-width:var(--max-width);
  margin:18px auto;
  padding:0 16px 5px;
}
.content-card{
  background:var(--content-bg);
  border-radius:8px;
  padding:18px;
  box-shadow: 2px 2px #616161;
  border: 2px solid #949292;
}
.content-title{
  color:var(--accent);
  font-weight:700;
  font-size: 22px;
  margin:0 0 8px 0;
}


.content-card .accent-text { color: #E34B2D; font-weight:bold;}
.content-card .blue-indent { color: #4C85CC; font-size: 1.0em; font-weight:bold; font-style: italic; text-align: center; padding: 15px;}
.content-card .accent-text3 { color: #C40202; font-size: 1.0em; font-weight:bold; text-align: center;}
.content-card .accent-text4 { color: #C40202; font-size: 0.8em; font-weight:bold; text-align: center;}
.content-card .accent-text5 { color: #C40202; font-size: 1.0em; font-weight:bold; text-align: left;}

.content-card .bold-text { color: #444; font-weight:bold;}

.content-card a{
  color: #B32B2B;
  font-weight: 700;
  text-decoration: none;
}

.content-card a:visited{
  color: #671B96;
  font-weight: 700;
  text-decoration: none;
}

hr {
  background-color: #ccc;
  border: 0;
  height: 1px;
  margin: 24px;
  margin-bottom: 1.714285714rem;
}

.responsive {
  max-width: 100%;
  height: auto;
}


.pd1 {
  margin-left: auto;
  margin-right: auto;
}

.pd1 td {
  padding:10px;
  text-align: center;
  vertical-align: middle;
}

.council {
  border: none;
  margin-left: auto;
  margin-right: auto;
  border-spacing: 10px;
}

.council-title{
  text-align: center;
  font-size: 12pt;
  font-weight: 700;
  padding: 5px;
}

.council td{
  text-align: center;
  font-size: 11pt;
  font-weight: 700;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.council th{
  text-align: center;
  font-size: 11pt;
  font-weight: 700;
  padding: 0px 5px 10px 5px;
}

.council-space{
  text-align: center;
  font-size: 11pt;
  font-weight: 700;
  padding: 5px 5px 5px 5px;
  border-top: 1px solid #ccc;
}


.park {
  border: none;
  margin-left: auto;
  margin-right: auto;
}

.park td{
  text-align: center;
  padding: 5px;
}

.park th{
  text-align: center;
  padding: 5px;
}





.contact-box{
  vertical-align: top;
  padding:10px;
  border:1px solid #ccc;
  background-color:#fafbfc;
  color:#505050;
  line-height:1.5em;
  width: 50%;
}

.map-container {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  height:400px;
  border:1px solid #ccc;
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.container-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px;
  box-sizing: border-box;
  max-width: 100%;
}

.container-sanitation {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px;
  box-sizing: border-box;
  max-width: 100%;
}



/* card style used for both columns */
.box2{
  padding: 12px;
  border: 1px solid #c0c0c0;
  background-color: #fafbfc;
  color: #505050;
  line-height: 1.5;
  box-sizing: border-box;
  flex: 1 1 320px; /* grow, shrink, base width */
  min-width: 260px; /* prevent becoming too narrow */
}

/* ensure media fits its container */
.box2 img,
.box2 iframe {
  width: 100%;
  height: auto;
  display: block;
  border: 0;
}

/* card style used for both columns */
.box3{
  border: 1px solid #c0c0c0;
  box-sizing: border-box;
  flex: 1 1 320px; /* grow, shrink, base width */
  min-width: 260px; /* prevent becoming too narrow */
}

/* ensure media fits its container */
.box3 img,
.box3 iframe {
  width: 100%;
  height: 320px;
  display: block;
  border: 0;
}

/* optional: control iframe aspect ratio on wide screens */
.map-wrapper {
  width: 100%;
  height: 100%;
  padding-bottom: 62%; /* ~500x310 aspect ratio */
  position: relative;
}
.map-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* optional: control iframe aspect ratio on wide screens */
.map-wrapper2 {
  width: 100%;
  height: 320px;
  padding-bottom: 62%; /* ~500x310 aspect ratio */
  position: relative;
}
.map-wrapper2 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 320px;
}


/* card style used for both columns */
.box4{
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px;
  box-sizing: border-box;
  flex: 1 1 320px; /* grow, shrink, base width */
  height: auto;
}

.box5{
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px;
  box-sizing: border-box;
  flex: 1 1 320px; /* grow, shrink, base width */
  height: auto;
}

.box5 img{
  width: 300px;
  height: 200px;
}


.museum {
  margin-left: auto;
  margin-right: auto;
  border-spacing: 10px;
}


.museum td{
  border: 1px solid #ccc;
  border-radius: 8px;
  text-align: center;
  font-size: 11pt;
  font-weight: 500;
  width:50%;
  padding: 15px;
  vertical-align: top;
}



/* textarea background, padding, border radius */
#msg {
  background-color: #f6f8fa;   /* change color f6f8fa */ 
  color: #111;                 /* text color */
  padding: 5px;
  border: 1px solid #d0d7de; 
  border-radius: 8px;
  width: 100%;
  min-height: 10px;
  box-sizing: border-box;
  font-size: 14px;
}

/* basic send button */
#send {
  background: linear-gradient(180deg, #D4065C, #C70244);
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: transform .08s ease, box-shadow .08s ease;
}

/* hover/focus/active states */
#send:hover { box-shadow: 0 6px 18px rgba(2,132,199,0.18); transform: translateY(-1px); }
#send:active { transform: translateY(0); box-shadow: none; }
#send:focus { outline: 2px solid rgba(6,182,212,0.25); outline-offset: 2px; }

.utility-bold{
  font-weight: bold;
  font-size: 16px;
}

.utility-italic {
  font-weight: bold;
  font-size: 16px;
  font-style: italic;
}


.history-title{
  text-align: center;
  margin: 0 0 5px;
  font-size: 18px;
  font-weight: 700;
  color: #8b0000;
}

.history-title2{
  text-align: center;
  font-size: 16px;
  padding-bottom: 20px;
}

.box-card {
  margin-top:18px;
  padding:12px;
  border:1px solid #ccc;   
  border-radius:8px;     
  background:#fff;
  box-shadow: none;
  overflow:auto;  
} 

.box-card2 {
  margin-top:8px;
  padding:10px;
  border:1px solid #ccc;   
  border-radius:8px;     
  background:#fff;
  box-shadow: none;
  overflow:auto;  
} 

.box-card3 {
  padding:10px;
  border:1px solid #ccc;   
  border-radius:8px;     
  background:#fff;
  box-shadow: none;
  overflow:auto;  
  height: 100%;
} 

.card-hanger {
  padding:12px;
  border:1px solid #d8cbcb;
  border-radius:8px;
  background:#fff;
  box-shadow: none;
  overflow:auto;
}

.title3 {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  color: #8b0000;
}

.title4 {
  font-size: 18px;
  font-weight: 700;
  color: #8b0000;
  padding-bottom: 10px;
}

.card-parade {
  padding:12px;
  border:1px solid #d8cbcb;
  border-radius:8px;
  background:#fff;
  box-shadow: none;
  overflow:auto;
  max-width: 50%;
}


.card-zoning{
  text-align: center;
  font-size: 11pt;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  max-width: 270px;
}


.seal {
  max-width: 220px;
  max-height: 230px;
}







/* Footer */
.site-footer{
  background:var(--footer);
  color:#ddd;
  padding:12px 0;
  margin-top:10px;
  font-size:13px;
}
.footer-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 16px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}

/* small muted links in footer */
.footer-links a{color:#f4eaea;text-decoration:none;margin-left:2px}
.footer-links a:hover{text-decoration:underline}

/* Responsive rules */
@media (max-width:800px){
  .sitename{font-size:16px}
  .logo{width:40px;height:40px}
  .nav{gap:4px}
  .nav > li > a{padding:10px}
  .nav{flex-wrap:nowrap;overflow-x:auto}
  .container{margin:12px auto;padding:0 12px 40px}
}



@media (max-width:520px){
  .top-inner{padding:0 12px}
  /* keep sitename visible and allow wrap */
  .sitename{
    display:block;
    font-size:15px;
    white-space:normal;
    word-break:break-word;
    line-height:1.05;
    flex:1 1 auto;
    min-width:0;
  }
  .logo{
    width:auto;
    max-width:48px;
    max-height:48px;
    height:auto;
  }
  .nav{flex-direction:column;gap:6px}
  .nav li .submenu{position:relative;top:0;left:0;box-shadow:none;border-radius:3px}
  .nav > li > a{padding:10px 12px}
  .content-card{padding:14px}
}







/* Hamburger button (hidden on desktop, shown on small screens) */
.nav-toggle{
  display:none;
  background:transparent;
  border:0;
  padding:6px;
  cursor:pointer;
  align-items:center;
}
.hamburger{display:inline-block;width:28px;height:20px;position:relative}
.hamburger span{display:block;height:2px;background:#fff;border-radius:2px;position:absolute;left:0;right:0}
.hamburger span:nth-child(1){top:0}
.hamburger span:nth-child(2){top:9px}
.hamburger span:nth-child(3){bottom:0}

/* Mobile-specific: hide nav by default and show via .open */
@media (max-width:520px){
  .nav-toggle{display:flex}
  /* start with nav hidden on very small screens to match hamburger pattern */
  #main-nav{display:none;flex-direction:column;gap:6px}
  #main-nav.open{display:flex}
  
  /* Submenus become collapsible accordions on mobile */
  .has-sub > a{display:flex;justify-content:space-between;align-items:center}
  .has-sub .submenu{display:none;position:relative;box-shadow:none;padding-left:12px}
  .has-sub.open .submenu{display:block}
  

}