/* =====================================================================
   DEMOCRATIC JUSTICE — STYLESHEET
   ---------------------------------------------------------------------
   HOW TO EDIT THIS FILE (read this first, it's short):

   1. COLORS & FONTS live in the ":root" block right below this comment.
      Change a value there and it updates everywhere on the site.

   2. The file is organized top-to-bottom in the SAME ORDER as the
      sections appear on the page (Header, Hero, Founder, Overview,
      Vision & Mission, About, Structure, Objectives, Principles,
      Leadership essay, Footer). Search for the section name in
      CAPS to jump to it.

   3. Each section is written so you can change its background color,
      spacing, or text size without breaking any other section.
   ===================================================================== */

:root {
  /* ---- BRAND COLORS (change these to re-theme the whole site) ---- */
  --navy-900: #0a1f3d;   /* deepest background navy */
  --navy-800: #123159;   /* card / section navy */
  --navy-700: #1b3f70;   /* lighter navy accents, borders on dark bg */
  --gold-500: #c9a227;   /* primary gold accent */
  --gold-400: #ddbb4c;   /* lighter gold for hover/highlight */
  --cream-50: #f7f5ef;   /* light section background */
  --white: #ffffff;
  --ink-900: #14203a;    /* main body text color on light backgrounds */
  --ink-600: #45526b;    /* secondary/muted text on light backgrounds */

  /* ---- FONTS ---- */
  --font-display: "Montserrat", Arial, sans-serif;   /* headings */
  --font-body: "Source Sans 3", Arial, sans-serif;   /* paragraphs */

  /* ---- SHARED SPACING ---- */
  --section-padding: 5.5rem 1.5rem;
  --max-width: 1120px;
}

/* ---------------------------------------------------------------------
   RESET / BASE
--------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--cream-50);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0;
  color: var(--navy-900);
  line-height: 1.15;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* small gold divider used between sections — echoes the scales-of-justice
   motif from the logo: a thin line with a center mark */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 0 auto 2.5rem;
  max-width: 220px;
}
.divider::before,
.divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--gold-500);
}
.divider .mark {
  width: 8px;
  height: 8px;
  background: var(--gold-500);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 0.75rem;
}

.section-title {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  margin-bottom: 1rem;
  text-align: center;
}

.section-lede {
  max-width: 700px;
  margin: 0 auto 3rem;
  text-align: center;
  color: var(--ink-600);
  font-size: 1.05rem;
}

.on-dark .section-title,
.on-dark h2, .on-dark h3, .on-dark h4 { color: var(--white); }
.on-dark .section-lede { color: #c7d1e0; }

/* Visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 3px;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------------
   HEADER
--------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navy-900);
  border-bottom: 3px solid var(--gold-500);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

/* LOGO SLOT — swap images/logo-placeholder.svg for your real logo file.
   Update the <img src> in index.html, not here. */
.brand .logo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-text .name {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--white);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

.brand-text .tag {
  font-size: 0.72rem;
  color: var(--gold-400);
  letter-spacing: 0.03em;
}

.site-nav {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
}

.site-nav a {
  color: #dbe3f0;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.site-nav a:hover {
  color: var(--gold-400);
  border-color: var(--gold-500);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--gold-500);
  color: var(--gold-400);
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
}

@media (max-width: 780px) {
  .site-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1rem 0 0.5rem;
  }
  .site-nav.open { display: flex; }
  .site-header .wrap { flex-wrap: wrap; }
  .nav-toggle { display: inline-block; }
}

/* ---------------------------------------------------------------------
   HERO
--------------------------------------------------------------------- */
.hero {
  position: relative;
  color: var(--white);
  overflow: hidden;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
}

/* HERO PHOTO SLOT — swap images/hero-placeholder.svg for a real photo.
   Update the <img src> in index.html. */
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,31,61,0.55) 0%, rgba(10,31,61,0.75) 55%, rgba(10,31,61,0.96) 100%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 4rem 1.5rem 3.5rem;
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
}

.hero-content .eyebrow { color: var(--gold-400); }

.hero-content h1 {
  color: var(--white);
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  font-weight: 800;
  max-width: 16ch;
}

.hero-content .hero-sub {
  margin-top: 1.1rem;
  max-width: 55ch;
  font-size: 1.1rem;
  color: #dde5f2;
}

.hero-cta {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  padding: 0.85rem 1.6rem;
  border-radius: 4px;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease;
}

.btn-primary {
  background: var(--gold-500);
  color: var(--navy-900);
}
.btn-primary:hover { background: var(--gold-400); transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.6);
}
.btn-ghost:hover { border-color: var(--gold-500); color: var(--gold-400); }

/* ---------------------------------------------------------------------
   FOUNDER'S STATEMENT
--------------------------------------------------------------------- */
.founder {
  background: var(--white);
  padding: var(--section-padding);
}

.founder-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3rem;
  align-items: start;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* FOUNDER PHOTO SLOT — swap images/founder-placeholder.svg for a real
   portrait photo. Update the <img src> in index.html. */
.founder-photo-wrap {
  position: sticky;
  top: 6rem;
}

.founder-photo-wrap img {
  border-radius: 10px;
  border: 4px solid var(--cream-50);
  box-shadow: 0 12px 30px -12px rgba(10,31,61,0.35);
}

.founder-photo-wrap .caption {
  margin-top: 1rem;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy-900);
  font-size: 0.95rem;
}
.founder-photo-wrap .caption span {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink-600);
  font-size: 0.85rem;
  margin-top: 0.15rem;
}

.founder-quote {
  font-size: 1.15rem;
  color: var(--ink-900);
}

.founder-quote .lead-line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--navy-900);
  margin-bottom: 1.2rem;
  border-left: 4px solid var(--gold-500);
  padding-left: 1rem;
}

@media (max-width: 780px) {
  .founder-grid { grid-template-columns: 1fr; }
  .founder-photo-wrap { position: static; max-width: 260px; margin: 0 auto; }
}

/* ---------------------------------------------------------------------
   PROJECT OVERVIEW
--------------------------------------------------------------------- */
.overview {
  background: var(--cream-50);
  padding: var(--section-padding);
}

.overview-body {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.05rem;
  color: var(--ink-900);
}

/* ---------------------------------------------------------------------
   VISION & MISSION
--------------------------------------------------------------------- */
.vm {
  background: var(--navy-900);
  padding: var(--section-padding);
}

.vm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

.vm-card {
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-top: 3px solid var(--gold-500);
  border-radius: 8px;
  padding: 2.2rem;
}

.vm-card .icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--gold-500);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  color: var(--gold-400);
  font-size: 1.3rem;
}

.vm-card h3 {
  color: var(--white);
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
}

.vm-card p { color: #d3dbe8; }

@media (max-width: 720px) {
  .vm-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   ABOUT (Solicitor & Solicitor Co.) + STRUCTURE
--------------------------------------------------------------------- */
.about {
  background: var(--white);
  padding: var(--section-padding);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

.info-card {
  background: var(--cream-50);
  border-radius: 8px;
  padding: 2.2rem;
  border-left: 4px solid var(--gold-500);
}

.info-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.9rem;
}

.info-card p { color: var(--ink-600); }

.contact-line {
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid #e3ddc9;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy-900);
}
.contact-line span {
  display: block;
  font-weight: 400;
  font-family: var(--font-body);
  color: var(--ink-600);
  margin-top: 0.2rem;
}

@media (max-width: 780px) {
  .about-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   CORE OBJECTIVES / KEY ACTIVITIES / EXPECTED IMPACT
--------------------------------------------------------------------- */
.objectives {
  background: var(--cream-50);
  padding: var(--section-padding);
}

.obj-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

.obj-card {
  background: var(--white);
  border-radius: 8px;
  padding: 1.9rem;
  box-shadow: 0 8px 24px -16px rgba(10,31,61,0.25);
}

.obj-card h3 {
  font-size: 1.05rem;
  color: var(--navy-900);
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--gold-500);
}

.obj-card ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--ink-600);
  font-size: 0.95rem;
}

.obj-card li { margin-bottom: 0.6rem; }
.obj-card li:last-child { margin-bottom: 0; }

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

/* ---------------------------------------------------------------------
   GUIDING PRINCIPLES
--------------------------------------------------------------------- */
.principles {
  background: var(--navy-900);
  padding: var(--section-padding);
  text-align: center;
}

.principle-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  max-width: 780px;
  margin: 0 auto;
}

.principle-tags span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--gold-400);
  border: 1.5px solid var(--gold-500);
  border-radius: 999px;
  padding: 0.55rem 1.3rem;
}

/* ---------------------------------------------------------------------
   ACCESSIBLE LEADERSHIP ESSAY + COMMUNITY PHOTO
--------------------------------------------------------------------- */
.leadership {
  background: var(--white);
  padding: var(--section-padding);
}

.leadership-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* COMMUNITY / CLOSING PHOTO SLOT — swap images/community-placeholder.svg
   for a real photo. Update the <img src> in index.html. */
.leadership-photo img {
  border-radius: 8px;
}

.leadership-text p { color: var(--ink-900); }

@media (max-width: 860px) {
  .leadership-grid { grid-template-columns: 1fr; }
  .leadership-photo { order: -1; }
}

/* ---------------------------------------------------------------------
   FOOTER / CLOSING CALL TO ACTION
--------------------------------------------------------------------- */
.site-footer {
  background: var(--navy-900);
  color: #cfd8e6;
  padding: 4rem 1.5rem 2.5rem;
  border-top: 3px solid var(--gold-500);
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
}

.footer-inner .brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.footer-inner .brand-row img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.footer-inner .brand-row span {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--white);
  font-size: 1.1rem;
}

.footer-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  color: var(--gold-400);
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.footer-meta {
  font-size: 0.85rem;
  color: #93a1b8;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--navy-700);
}