/* ============================================================
   SID — Bay Area Chapter — brand theme  (INDEPENDENT BRAND)
   Tenant: sid-bayarea   (sid-bayarea.codez.ninja)
   Child of: sid  — but runs its own identity (high autonomy)
   ============================================================ */

:root {
  /* Bay Area's own identity: Golden Gate International Orange led */
  --brand-primary:        #C1410F;   /* International Orange (bridge) — chapter's lead colour */
  --brand-primary-dark:   #9A330B;
  --brand-primary-light:  #FBE9DF;
  --brand-sid-blue:       #1D4F91;   /* the only nod to the SID family */
  --brand-ink:            #1F2530;
  --brand-muted:          #5A6B7B;

  --header-bg:            #ffffff;
  --header-border:        #C1410F;
  --link-color:           #C1410F;
  --link-hover:           #9A330B;
  --button-bg:            #C1410F;
  --button-text:          #ffffff;
}

/* Header — its own warm identity, not parent blue */
.site-header { background: var(--header-bg); border-bottom: 3px solid var(--brand-primary); }
.site-header .logo img { max-height: 40px; }

/* Hero — photographic Golden Gate dusk */
.hero {
  position: relative;
  background-image: url("../img/hero.jpg");
  background-size: cover;
  background-position: center 40%;
  color: #ffffff;
}
.hero .hero-inner { position: relative; z-index: 2; }
.hero h1, .hero h2 { text-shadow: 0 2px 12px rgba(10,20,40,0.45); }
.hero .hero-rule { border-top: 4px solid var(--brand-primary); }

/* Buttons — International Orange */
.btn-primary, .button-primary { background: var(--button-bg); color: var(--button-text); border: none; }
.btn-primary:hover, .button-primary:hover { background: var(--brand-primary-dark); }

a { color: var(--link-color); }
a:hover { color: var(--link-hover); }

.section-title { color: var(--brand-sid-blue); border-bottom: 3px solid var(--brand-primary); }
.badge, .pill { background: var(--brand-primary-light); color: var(--brand-primary-dark); }

.site-footer { background: #1F2530; color: #d7ccc4; }
.site-footer .footer-accent { color: var(--brand-primary); }