/* ==========================================================================
   Ukrainian Toronto & Area  ·  uato.ca
   Ukrainian Canadian Congress — Toronto Branch
   ========================================================================== */

:root{
  --navy:#1f3f86;
  --navy-deep:#13357f;
  --blue:#2d4a8a;
  --blue-soft:#eef2fb;
  --blue-tint:#f6f8fd;
  --ink:#16203a;
  --muted:#5b6577;
  --line:#e4e9f3;
  --bg:#ffffff;
  --yellow:#f5c518;
  --maxw:1180px;
  --wide:1500px;
  --radius:16px;
  --shadow:0 1px 2px rgba(19,53,127,.04), 0 8px 28px rgba(19,53,127,.07);

  /* category accents, echoing the printed map */
  --c-ucc:#f5c518;
  --c-church:#8c2338;
  --c-social:#6b3fa0;
  --c-culture:#e2660d;
  --c-school:#12854a;
  --c-diplo:#1b4b8f;
  --c-world:#1592cf;
  --c-credit:#12406e;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  display:flex;
  flex-direction:column;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--navy);}
img{max-width:100%;}

/* ---------------- Header ---------------- */
header.site{
  position:sticky;top:0;z-index:30;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.bar{
  max-width:var(--wide);
  margin:0 auto;
  padding:16px 24px;
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}
.brand{display:flex;align-items:center;flex:none;text-decoration:none;}
.brand img{height:96px;width:auto;display:block;}
.spacer{flex:1 1 auto;}

nav.main{display:flex;gap:6px;flex-wrap:wrap;}
nav.main a{
  text-decoration:none;color:var(--muted);font-weight:600;font-size:.95rem;
  padding:9px 14px;border-radius:9px;transition:background .15s,color .15s;
  white-space:nowrap;
}
nav.main a:hover{background:var(--blue-soft);color:var(--navy);}
nav.main a[aria-current="page"]{background:var(--navy);color:#fff;}

.lang{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;flex:none;background:#fff;}
.lang button{
  appearance:none;border:0;background:transparent;color:var(--muted);
  font:inherit;font-weight:600;font-size:.85rem;
  padding:9px 15px;cursor:pointer;transition:background .15s,color .15s;
}
.lang button + button{border-left:1px solid var(--line);}
.lang button:hover{background:var(--blue-soft);}
.lang button[aria-pressed="true"]{background:var(--navy);color:#fff;}

/* ---------------- Hero ---------------- */
.hero{
  background:
    radial-gradient(900px 380px at 18% -40%, rgba(45,74,138,.10), transparent 70%),
    linear-gradient(180deg, var(--blue-tint), #fff 92%);
  border-bottom:1px solid var(--line);
}
.hero-inner{max-width:var(--maxw);margin:0 auto;padding:46px 24px 40px;}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--line);
  color:var(--navy);font-weight:600;font-size:.8rem;letter-spacing:.3px;
  padding:6px 14px;border-radius:999px;box-shadow:var(--shadow);
}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--navy);}
h1.page{
  font-size:clamp(2rem,4.6vw,3.15rem);
  line-height:1.06;letter-spacing:-.8px;
  margin:18px 0 0;color:var(--navy-deep);font-weight:800;
}
.lede{font-size:clamp(1.05rem,2.2vw,1.3rem);color:var(--blue);font-weight:600;margin:10px 0 0;}
.desc{margin:20px 0 0;max-width:74ch;font-size:1.05rem;line-height:1.65;color:var(--muted);}

/* ---------------- Map ---------------- */
.map-section{width:100%;padding:28px clamp(16px,3vw,40px) 8px;display:flex;flex-direction:column;}
.map-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 14px;}
.map-head h2{margin:0;font-size:1.15rem;font-weight:800;color:var(--navy-deep);}
.map-head .hint{margin:0;color:var(--muted);font-size:.95rem;}
.map-frame{
  position:relative;width:100%;
  height:min(78vh,860px);min-height:min(78vh,860px);
  border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:var(--blue-soft);box-shadow:var(--shadow);
}
.map-frame iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;}

/* ---------------- Supporters / ads ---------------- */
.ads{width:100%;padding:34px clamp(16px,3vw,40px) 40px;}
.ads-inner{max-width:var(--maxw);margin:0 auto;}
.ads h2{
  margin:0 0 4px;font-size:1.15rem;font-weight:800;color:var(--navy-deep);
}
.ads .hint{margin:0 0 18px;color:var(--muted);font-size:.95rem;}
.ad-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;}
.ad-grid a{
  display:block;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:#fff;box-shadow:var(--shadow);transition:transform .18s, box-shadow .18s;
}
.ad-grid a:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(19,53,127,.06),0 14px 34px rgba(19,53,127,.12);}
.ad-grid img{display:block;width:100%;height:auto;}

/* ---------------- Generic content pages ---------------- */
main.content{max-width:var(--maxw);margin:0 auto;padding:36px 24px 48px;width:100%;}
main.wide{max-width:var(--wide);}
.content h2{
  font-size:1.5rem;color:var(--navy-deep);font-weight:800;
  margin:40px 0 12px;letter-spacing:-.3px;
}
.content h2:first-of-type{margin-top:8px;}
.content h3{font-size:1.08rem;color:var(--navy);font-weight:700;margin:26px 0 8px;}
.content p{line-height:1.7;color:#2b3550;margin:0 0 14px;max-width:78ch;}
.content ol.aims{margin:0;padding:0;list-style:none;counter-reset:aim;}
.content ol.aims li{
  counter-increment:aim;position:relative;
  padding:0 0 0 46px;margin:0 0 16px;line-height:1.65;color:#2b3550;max-width:78ch;
}
.content ol.aims li::before{
  content:counter(aim);position:absolute;left:0;top:1px;
  width:30px;height:30px;border-radius:50%;
  background:var(--blue-soft);color:var(--navy);
  font-weight:700;font-size:.9rem;
  display:flex;align-items:center;justify-content:center;
}

.card{
  background:var(--blue-tint);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 24px;margin:20px 0 0;
}
.card h3{margin-top:0;}
.card p{margin-bottom:8px;}

.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}

table.board{border-collapse:collapse;width:100%;max-width:640px;margin:6px 0 0;}
table.board td{
  padding:9px 12px 9px 0;border-bottom:1px solid var(--line);
  font-size:.98rem;vertical-align:top;
}
table.board td.role{color:var(--muted);}
table.board tr:last-child td{border-bottom:0;}

/* ---------------- Directory ---------------- */
.dir-jump{
  background:var(--blue-tint);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 22px;margin:10px 0 34px;
}
.dir-jump strong{display:block;color:var(--navy-deep);font-size:.95rem;margin-bottom:10px;}
.dir-jump ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px;}
.dir-jump a{
  display:inline-block;text-decoration:none;font-size:.88rem;font-weight:600;
  color:var(--navy);background:#fff;border:1px solid var(--line);
  padding:6px 12px;border-radius:999px;
}
.dir-jump a:hover{background:var(--navy);color:#fff;border-color:var(--navy);}

.dir-part{margin:0 0 8px;}
.dir-part h2{
  font-size:1.6rem;margin:44px 0 6px;color:var(--navy-deep);
  padding-bottom:10px;border-bottom:3px solid var(--yellow);
}
.dir-part p.part-note{color:var(--muted);font-size:.98rem;margin:0 0 6px;}

section.cat{margin:30px 0 0;scroll-margin-top:130px;}
section.cat > h3{
  display:flex;align-items:center;gap:10px;
  margin:0 0 4px;font-size:1.12rem;font-weight:800;color:var(--navy-deep);
}
section.cat > h3::before{
  content:"";width:12px;height:12px;border-radius:3px;
  background:var(--accent,var(--navy));flex:none;
}
section.cat > .catcount{margin:0 0 12px 22px;font-size:.85rem;color:var(--muted);}

ul.orgs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
ul.orgs > li{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,220px);
  gap:4px 24px;
  padding:12px 0 12px 14px;
  border-bottom:1px solid var(--line);
  border-left:3px solid var(--accent,var(--navy));
  background:linear-gradient(90deg, rgba(0,0,0,.014), transparent 40%);
}
ul.orgs .name{font-weight:700;color:var(--ink);line-height:1.35;}
ul.orgs .addr{grid-column:1;color:var(--muted);font-size:.93rem;line-height:1.45;}
ul.orgs .meta{
  grid-column:2;grid-row:1 / span 2;
  text-align:right;font-size:.93rem;line-height:1.6;
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
}
ul.orgs .meta a{color:var(--navy);text-decoration:none;font-weight:600;}
ul.orgs .meta a:hover{text-decoration:underline;}
ul.orgs ol.branches{
  grid-column:1 / -1;margin:10px 0 2px;padding:0 0 0 18px;
  color:var(--muted);font-size:.92rem;line-height:1.7;
}
ul.orgs ol.branches li{margin:0;}
ul.orgs ol.branches b{color:var(--ink);font-weight:600;}

/* ---------------- Footer ---------------- */
footer.site{border-top:1px solid var(--line);background:var(--blue-tint);}
.foot{
  max-width:var(--wide);margin:0 auto;padding:26px 24px;
  display:flex;gap:14px 32px;flex-wrap:wrap;
  align-items:flex-start;justify-content:space-between;
  font-size:.92rem;color:var(--muted);
}
.foot a{font-weight:600;}
.foot a:hover{text-decoration:underline;}
.foot .credit{font-weight:700;color:var(--navy);}
.foot .col{max-width:46ch;}
.foot .col p{margin:0 0 6px;line-height:1.6;}

/* ---------------- Responsive ---------------- */
@media (max-width:900px){
  .grid-2{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .ad-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .brand img{height:58px;}
  .bar{padding:12px 16px;gap:10px 12px;}
  nav.main{order:3;width:100%;gap:4px;}
  nav.main a{padding:8px 10px;font-size:.9rem;}
  .lang button{padding:8px 12px;}
  .hero-inner{padding:32px 18px 28px;}
  .map-section{padding:22px 14px 6px;}
  .map-frame{height:70vh;min-height:70vh;}
  .ads{padding:28px 14px 34px;}
  main.content{padding:28px 18px 40px;}
  ul.orgs > li{grid-template-columns:1fr;gap:3px;}
  ul.orgs .meta{grid-column:1;grid-row:auto;text-align:left;align-items:flex-start;}
  table.board td{display:block;padding:2px 0;border:0;}
  table.board tr{display:block;padding:8px 0;border-bottom:1px solid var(--line);}
}