/* City of West Hollywood — replica styling.
   weho.org draws a deep-blue field behind a white content column, Arial throughout, with a
   purple uppercase page title and a dark-blue side menu. Hand-written CSS that reads the same. */

:root{
  --field:   #003f6d;
  --field-d: #0c3656;
  --side:    #0d2f4a;
  --side-on: #1d6fa8;
  --purple:  #783188;
  --gold:    #f2a900;
  --ink:     #373737;
  --muted:   #666;
  --line:    #dcdfe4;
  --wash:    #f3f5f8;
}

*{ box-sizing:border-box }
body{
  margin:0; color:var(--ink); background:var(--field) linear-gradient(180deg,#0a4f86 0,var(--field) 420px);
  font:15px/1.6 Arial, Helvetica, sans-serif;
}
a{ color:#0b5f9e }
img{ max-width:100% }

.preview-note{
  background:#111820; color:#e8eef5; font-size:13px; line-height:1.5;
  padding:10px 16px; text-align:center;
}
.preview-note b{ color:var(--gold) }
.preview-note a{ color:#fff }

header.site .bar{
  max-width:1060px; margin:0 auto; padding:18px 16px;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.wordmark{ color:#fff; text-decoration:none; font-weight:700; font-size:30px; letter-spacing:.5px;
  line-height:1; text-transform:uppercase }
.wordmark small{ display:block; color:var(--gold); font-size:12px; letter-spacing:2px; margin-bottom:3px }
nav.site{ margin-left:auto; display:flex; gap:22px; flex-wrap:wrap }
nav.site a{ color:#fff; font-weight:700; font-size:15px; text-decoration:none; padding:6px 0;
  border-top:3px solid transparent }
nav.site a.here{ border-top-color:#2a9fd8 }

.layout{ max-width:1060px; margin:0 auto; padding:8px 16px 40px; display:flex; gap:16px; align-items:flex-start }
.side{ flex:0 0 200px; background:var(--side); color:#fff; font-size:12.5px }
.side-head{ margin:0; padding:10px 12px; background:#081f33 }
.side ul{ list-style:none; margin:0; padding:0 }
.side a{ display:block; color:#fff; text-decoration:none; padding:9px 12px 9px 26px; border-top:1px solid rgba(255,255,255,.06) }
.side a:hover{ background:rgba(255,255,255,.08) }
.side a.on{ background:var(--side-on) }

.page{ flex:1; min-width:0; background:#fff }
.banner{ height:120px; background:#6aa9d6 url("https://www.weho.org/home/showpublishedimage/21335/638555197288000000") center 62%/cover }
.content{ padding:14px 24px 30px }
.crumb{ font-size:11.5px; color:var(--muted); margin:0 0 10px }
.crumb a{ color:var(--muted) }
h1{ color:var(--purple); text-transform:uppercase; font-size:26px; font-weight:400; margin:0 0 14px;
  padding-bottom:8px; border-bottom:1px solid var(--line) }
h2{ color:var(--field); font-size:19px; margin:28px 0 8px }
h3{ color:var(--purple); font-size:16px; margin:20px 0 6px }
.stars{ border:0; border-top:2px dotted #b7bec8; margin:22px 0 }

.facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin:14px 0 }
.facts div{ background:var(--wash); border-left:4px solid var(--field); padding:10px 12px; font-size:14px }
.facts b{ display:block; font-size:20px; color:var(--field) }

.cal-head{ display:flex; align-items:center; gap:10px; margin-top:24px }
.cal-head h2{ margin:0 }
.live{ background:#0f8a4b; color:#fff; font-size:11px; font-weight:700; letter-spacing:.5px;
  border-radius:3px; padding:2px 7px; text-transform:uppercase }
.sub{ color:var(--muted); margin:6px 0 10px }
.frame{ border:1px solid var(--line); height:620px; background:#fff }
.frame iframe{ width:100%; height:100%; border:0; display:block }
.frame.pending{ display:flex; align-items:center; justify-content:center; text-align:center;
  background:repeating-linear-gradient(135deg,#f6f8fb 0 12px,#eef2f7 12px 24px); color:var(--muted) }
.cal-foot{ font-size:13px; color:var(--muted); margin:6px 0 0 }

.finding{ background:#fbf6fd; border:1px solid #e6d3ec; border-left:5px solid var(--purple);
  padding:12px 16px; margin:18px 0; font-size:14px }
.finding ul{ margin:6px 0 0; padding-left:20px }
.est{ background:#fff4d6; padding:0 3px }

table.fees{ border-collapse:collapse; margin:6px 0 12px; font-size:14px }
table.fees td{ border-bottom:1px solid var(--line); padding:5px 14px 5px 0 }
ul.closures{ padding-left:20px; font-size:14px }
ul.closures li{ margin:2px 0 }
.btn{ display:inline-block; background:var(--field); color:#fff; padding:8px 16px; border-radius:3px;
  text-decoration:none; font-weight:700; font-size:14px }

footer.site{ background:rgba(12,54,86,.95); color:#d6e2ec; font-size:13.5px }
footer.site .in{ max-width:1060px; margin:0 auto; padding:26px 16px; display:flex; gap:40px; flex-wrap:wrap }
footer.site b{ color:#fff; display:block; margin-bottom:6px }
footer.site a{ color:#fff }
footer.site ul{ list-style:none; padding:0; margin:0 }
footer.site .fine{ max-width:1060px; margin:0 auto; padding:0 16px 22px; font-size:12px; color:#9fb5c7 }

@media (max-width:820px){
  .layout{ flex-direction:column }
  .side{ flex:none; width:100% }
  .side ul{ display:flex; flex-wrap:wrap }
  .side li{ flex:1 1 50% }
  .side a{ padding-left:12px }
  .content{ padding:12px 16px 24px }
  .frame{ height:560px }
  .wordmark{ font-size:24px }
}