/* ========================================================================
   Semiahmoo Community Safety Society — Site Styles
   New, consolidated stylesheet with centered sponsors layout and
   per-logo sizing for visual uniformity.
   ======================================================================== */

/* ------------------------------ Theme ------------------------------ */
:root{
  --brand-ink:  #0F2233;
  --brand-blue: #0F4C81;
  --brand-teal: #00A8A8;
  --brand-gold: #F4B400;
  --bg:         #f7fafc;
  --card:       #ffffff;
  --muted:      #6b7280;
}

/* ------------------------------ Base ------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--brand-ink);
  background: var(--bg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
               "Apple Color Emoji", "Segoe UI Emoji";
}
img { max-width: 100%; display: block; }
a { color: var(--brand-blue); text-decoration: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }

/* ------------------------------ Header ----------------------------- */
.skip-link{
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus{
  left: 1rem; top: 1rem; width: auto; height: auto; background: #fff;
  padding: .5rem 1rem; border: 2px solid var(--brand-blue); border-radius: .4rem; z-index: 1000;
}
.site-header { position: sticky; top: 0; background: #fff; border-bottom: 1px solid #e5e7eb; z-index: 999; }

.topbar {
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-teal));
  color: #fff; font-size: .9rem;
}
.topbar .container {
  display: flex; justify-content: space-between; align-items: center;
  padding: .4rem 1rem; color: #fff;
}
.topbar .right { color: #fff; font-weight: 400; }

.navbar { display: flex; align-items: center; justify-content: space-between; padding: .75rem 0; }
.brand { display: flex; align-items: center; gap: .75rem; }
.brand img { height: 42px; width: auto; }
.brand .title { font-weight: 800; color: var(--brand-blue); letter-spacing: .3px; }

.nav-links { display: flex; gap: 1rem; align-items: center; }
.nav-links a { padding: .5rem .75rem; border-radius: .4rem; font-weight: 600; color: var(--brand-ink); }
.nav-links a:hover { background: #f1f5f9; }
.nav-links a.donate { background: var(--brand-gold); color: #111827 !important; }
.nav-links a.donate:hover { filter: brightness(.95); }

.menu-toggle { display: none; background: none; border: none; }
.menu-toggle svg { width: 28px; height: 28px; color: var(--brand-ink); }

@media (max-width: 900px){
  .nav-links{
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid #e5e7eb;
    flex-direction: column; padding: 1rem;
  }
  .nav-links.open { display: flex; }
  .menu-toggle { display: block; }
}

/* ------------------------------ Hero ------------------------------- */
.hero{
  position: relative;
  background:
    linear-gradient(180deg, rgba(15,76,129,.8), rgba(0,168,168,.6)),
    url('assets/banner.jpg') center/cover no-repeat;
  color: #fff;
}
.hero .container { padding: 1rem 1rem; }
.hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin: .2rem 0 1rem; }
.hero p { font-size: 1.1rem; max-width: 60ch; }
.hero .actions { display: flex; gap: 1rem; margin-top: 1.2rem; flex-wrap: wrap; }
.btn { display: inline-block; padding: .8rem 1.1rem; border-radius: .6rem; font-weight: 700; }
.btn-primary { background: #fff; color: var(--brand-blue); }
.btn-outline  { border: 2px solid #fff; color: #fff; }

/* ------------------------------ Sections --------------------------- */
.section { padding: 1rem 0; }
.section h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 1rem; }

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

@media (max-width: 900px){
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}

.card {
  background: var(--card); border: 4px solid #e5e7eb; border-radius: 1rem; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.card .content { padding: 1rem 1.2rem; }
.card h3 { margin: .2rem 0 .5rem; }
.card p  { color: var(--muted); }


.card .content {
    display: flex;
    flex-direction: column;
    align-items: center;      /* center Instagram logo + text */
    text-align: center;
}


/* ------------------------------ Sub‑hero --------------------------- */
.sub-hero{
  background:
    linear-gradient(180deg, rgba(15,76,129,.85), rgba(0,168,168,.5)),
    url('assets/banner.jpg') center/cover no-repeat;
  color: #fff;
}
.sub-hero .container { padding: 3rem 1rem; }
.breadcrumbs { font-size: .9rem; opacity: .9; }
.breadcrumbs a { color: #fff; text-decoration: underline; }

/* ------------------------------ Content ---------------------------- */
.prose p  { padding: 0rem 1rem; line-height: 1.7; color: #374151; }
.prose h3 { margin-top: 1.2rem; }
.kicker   { color: var(--brand-teal); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .85rem; text-align: center;}

/* ------------------------------ Footer ----------------------------- */
.site-footer { background: #0b1220; color: #cbd5e1; margin-top: 2rem; }
.site-footer a { color: #e2e8f0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; padding: 2rem 0; }
.footer-brand { display: flex; gap: 1rem; align-items: center; }
.footer-brand img { height: 46px; }
.social { display: flex; gap: .6rem; }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 1rem 0; font-size: .9rem;
  display: flex; justify-content: space-between; flex-wrap: wrap;
}
@media (max-width: 900px){ .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ===================================================================
   Our Sponsors — Centered groups + centered tiles + per-logo sizing
   =================================================================== */

/* Center the section heading and the whole sponsors panel */
.section.container h2 { text-align: center; }
.sponsors { max-width: 1100px; margin: 0 auto; }

/* Group “card” styling */
.sponsor-group{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.sponsor-group h3 { text-align: center; }

.logo--remax-colonial-pacific      img { max-height: 75px; }

/* Responsive, centered grid for logo tiles */
.sponsor-logos{
  display: grid;
  /* auto-fit lets the grid center leftover tiles on short rows */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;

  /* center a short row (e.g., 3 presenting sponsors) */
  justify-content: center;

  /* center content inside each grid cell */
  justify-items: center;
  align-items: center;
}

@media (max-width: 900px){
  .sponsor-logos{ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* Make each tile a centered, interactive box */
.sponsor-logos a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: .8rem;
  transition: box-shadow .2s, transform .05s;
}
.sponsor-logos a:focus,
.sponsor-logos a:hover{
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

/* Baseline sizing for all logos — roughly uniform appearance */
.sponsor-logos img{
  max-height: 72px;          /* global baseline cap */
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Per‑logo adjustments (guided by your screenshot)
   These nudge outliers so everything feels the same visual size. */

/* Presenting */
.logo--alexanderwealth-raymondjames img { max-height: 75px; }
.logo--nei                         img { max-height: 75px; }
.logo--gails-way                   img { max-height: 75px; }

/* Wine */
.logo--remax-colonial-pacific      img { max-height: 75px; }
.logo--ocean-pointe-business-centre img { max-height: 68px; }

/* Entertainment */
.logo--oviedo-properties           img { max-height: 72px; }

/* Community */
.logo--td-asset-management         img { max-height: 52px; }
.logo--ia-financial-group          img { max-height: 52px; }
.logo--2-angels-home-services      img { max-height: 60px; }
.logo--weststone-group             img { max-height: 60px; }  /* keeps presence, avoids overpowering */
.logo--chartwell                   img { max-height: 60px; }
.logo--thrifty-foods               img { max-height: 60px; }
.logo--iom                         img { max-height: 60px; }

/* Community Partners */
.logo--white-rock-rotary-club      img { max-height: 80px; }

/* ---------------- Compact list layout for Initiatives on mobile -------- */
@media (max-width: 600px){
  #initiatives .kicker{ margin-bottom: .6rem; }
  .initiatives-grid{ grid-template-columns: 1fr; gap: .8rem; }
  .initiative-card .card-link{ display:flex; align-items:flex-start; gap:.75rem; }
  .initiative-card img{ width: 96px; max-width: 96px; aspect-ratio: 3/2; object-fit: cover; border-radius: .5rem; }
  .initiative-card h3{ font-size: 1rem; line-height: 1.25; margin: 0; }
  .initiative-card p{ display:none; }
  .initiative-card .mini-links{ display:none; }
  .initiative-card .ext{ font-size: .9rem; }
}


/* Center text in Initiatives cards */
#initiatives .initiative-card .content{ text-align:center; }
#initiatives .initiative-card h3{ margin-top:.25rem; }


/* Placeholder hero image next to Who We Are */
.about-hero{ display:block; width: 100%; max-width: 720px; height:auto; margin-top:1rem; border-radius: .5rem; }
@media (min-width: 900px){
  .sub-hero .container{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items:center; }
  .sub-hero .container p{ margin-bottom:0; }
}


/* Gala intro with right-side placeholder image */
.gala-intro{ display:grid; grid-template-columns: 1fr 1fr; gap:2rem; align-items:center; }
.gala-hero-img{ width:100%; border-radius:.8rem; object-fit:cover; aspect-ratio:4/3; }
@media(max-width:900px){ .gala-intro{ grid-template-columns:1fr; } }

/* Sticky ticket banner below sub-hero */
#ticket-banner{ position: sticky; top: 0; z-index: 998; background: #10223a; color:#fff; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
#ticket-banner .banner-inner{ display:flex; gap:1rem; align-items:center; justify-content:space-between; padding:.8rem 1rem; }
#ticket-banner .btn{ background:#fff; color:#0F4C81; }
@media(max-width:900px){ #ticket-banner .banner-inner{ flex-direction:column; align-items:flex-start; } }
/* Caption under intro image */
.gala-hero-figure{ margin:0; }
.gala-hero-figure figcaption{ font-size:.9rem; color:#6b7280; margin-top:.5rem; text-align:center; }

.center-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* Optional: Make it responsive */
  max-width: 100%;
  height: auto; 
}

.center {

  margin-left: auto;
  margin-right: auto;
  /* Shorthand: margin: auto; */
}

/* Center text horizontally and vertically in left column of gala about section */
.grid.grid-2 .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}


/* Vertically center the entire contact section */
#main.container.section {
    min-height: 1vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

@media (min-width: 901px) {

    .nav-links {

        max-height: none !important;

        overflow: visible !important;

    }

}