/* Suffolk Lawyers for Justice — site styles.
   Custom CSS (no framework), matching the original Avada theme tokens.
   Mobile-first; desktop nav at 992px. */

:root {
  /* Palette (from the original theme) */
  --color-accent: #65bc7b;        /* primary green */
  --color-accent-dark: #5db072;
  --color-purple: #630052;        /* h2 + buttons */
  --color-purple-bright: #a8198a; /* brighter purple for nav hover/active */
  --color-heading: #212934;       /* h1/h3+, nav, links */
  --color-body: #4a4e57;          /* body text */
  --color-bg: #ffffff;
  --color-border: #e2e2e2;
  --color-footer: #212934;        /* dark footer widget area */
  --color-copyright: #1d242d;     /* darker copyright bar */

  /* Hero gradient: purple (left) fading to blue (right) over the photo */
  --hero-overlay-start: rgba(70, 30, 94, 0.83);
  --hero-overlay-end: rgba(0, 98, 196, 0.41);

  /* Typography */
  --font-heading: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  --container-max: 1200px;       /* original site content width */
  --nav-height: 94px;
  --header-offset: 88px;         /* sticky header height; offsets anchor jumps */
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--color-body);
  background: var(--color-bg);
  overflow-x: hidden;          /* guard against accidental horizontal scroll */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-heading);
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.375rem); line-height: 1.16; }   /* 54px */
h2 { font-size: clamp(1.6rem, 3.5vw, 2.1875rem); line-height: 1.2; color: var(--color-purple); margin-bottom: 0.8em; } /* 35px */
h3 { font-size: 1.5rem; line-height: 1.3; }   /* 24-32px */
h4 { font-size: 1.3rem; }

a { color: var(--color-purple-bright); text-decoration: none; transition: color 0.2s linear; }
a:hover { color: var(--color-purple); }

p { margin: 0 0 1.2em; }

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

address { font-style: normal; color: var(--color-body); line-height: 1.7; }

.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 1.5rem; }
.container.narrow { max-width: 820px; }
.container.center, .center { text-align: center; }
.container.center .button { margin-top: 1.5rem; }

.button {
  display: inline-block;
  background: var(--color-purple);
  color: #fff;
  padding: 13px 29px;           /* original button padding */
  border-radius: 4px;           /* slight corner rounding, like the original */
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;          /* 14px */
  line-height: 1.2;
}
.button:hover { background: #4d0040; color: #fff; }
.button:focus-visible { background: #4d0040; color: #fff; outline: 2px solid var(--color-purple); outline-offset: 2px; }

/* ---------- Header / nav ----------
   Two rows: a white logo row, then a full-width light-grey nav bar
   below it (matching the original Avada below-logo layout). */
.site-header { position: sticky; top: 0; z-index: 100; }

.header-top { background: #fff; }
.header-top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 88px;
}
.brand img { height: 40px; width: auto; }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 3px;
  width: 26px;
  background: #9ea0a4;
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Full-width light-grey nav bar below the logo. */
.navbar { background: #ededed; border-top: 1px solid #e2e2e2; }
.navbar { display: none; }            /* collapsed on mobile until toggled */
.navbar.open { display: block; }

.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list > li > a {
  display: block;
  padding: 0.7rem 1rem;
  color: #1a1a1a;               /* near-black on the light-grey bar */
  font-family: var(--font-heading);  /* Lora serif, like the original menu */
  font-size: 1.125rem;          /* 18px */
  font-weight: 400;
  white-space: nowrap;          /* keep each item on a single line */
  text-decoration: none;
  transition: color 0.2s linear, background-color 0.2s linear;
}
.nav-list > li > a:hover,
.nav-list > li.active > a { color: var(--color-purple-bright); }

.dropdown { list-style: none; margin: 0; padding: 0 0 0.25rem 1rem; }
.dropdown li a {
  display: block;
  padding: 0.5rem 1rem;
  color: #1a1a1a;
  font-family: var(--font-heading);
  font-size: 1rem;
}
.dropdown li a:hover { color: var(--color-purple-bright); }
.caret { font-size: 0.95em; opacity: 0.85; margin-left: 0.2em; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.hero-home { min-height: 480px; background-image: url('/static/images/dorchester.jpg'); }
.hero-page { min-height: 280px; }
/* Per-page hero photos, matching the original site. */
.hero-eastboston { background-image: url('/static/images/eastboston.jpg'); }
.hero-westroxbury { background-image: url('/static/images/westroxbury.jpg'); }
.hero-roxbury { background-image: url('/static/images/roxbury.jpg'); }
/* Calendar pages: gradient only over white, no photo (matches original).
   The title is left-aligned over the strong purple-left of the gradient. */
.hero-plain { min-height: 240px; background-color: #fff; }
.hero-plain .hero-content { max-width: var(--container-max); }

.hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at left center,
    var(--hero-overlay-start) 0%, var(--hero-overlay-end) 100%);
}
.hero-content { position: relative; padding: 3.5rem 1.5rem; width: 100%; }
/* Title constrained to a narrow left column (matches the original ~500px),
   so it wraps into a tall left-aligned block over the strong purple area. */
.hero-content h1 { color: #fff; margin: 0; max-width: 520px; }
.hero-content h1 em { font-style: italic; }

/* ---------- Sections ---------- */
.section { padding: 4rem 0; }
.section-alt { background: #f4f4f4; }     /* alternating grey, like the original */
.section-heading { margin-bottom: 1.5rem; }

/* Section divider bands mark the start of each merged content area on the
   single page and are the targets the nav anchors scroll to. scroll-margin-top
   keeps the band clear of the sticky header. */
.section-band {
  padding: 2.5rem 0 1.5rem;
  border-top: 2px solid var(--color-purple);
  scroll-margin-top: var(--header-offset);
}
.band-title { margin: 0; color: var(--color-purple); }

/* Reusable purple divider line at the top of a section, for sections that have
   no section-band band but still want the visual separator. */
.divider-top { border-top: 2px solid var(--color-purple); }

/* Bandless sections that are still nav anchor targets need the header offset. */
#our-mission,
#who-we-are,
#applying,
#law-student { scroll-margin-top: var(--header-offset); }

/* Each major content area on the single page is one uniform background color,
   alternating between areas (rather than between the sections inside an area).
   The band and its content sections inherit the wrapper's background. */
.band-group--grey { background: #f4f4f4; }
.band-group--white { background: #fff; }

/* Homepage intro: two columns (Mission + What We Do on the left, Our Program on
   the right). Space out a second heading stacked within a column. */
.col-title:not(:first-child) { margin-top: 2.5rem; }

/* Multi-column layouts */
.cols-3 { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: start; }
.cols-2 { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: start; }
.col-title { text-align: left; }          /* homepage intro headings */

/* Plain people listings (no card borders), in fixed-width wrapping columns */
.people { display: grid; gap: 2.5rem 3rem; grid-template-columns: 1fr; }
.person h3 { font-size: 1.15rem; margin: 0 0 0.15rem; }
.person .role { margin: 0 0 0.6rem; }
.person address { line-height: 1.7; }
.person address a { color: var(--color-body); }
.person address a:hover { color: var(--color-accent); }

/* Stacked people rosters (Board of Directors, Supervising Attorneys): keep the
   gap above each roster equal to the homepage subsection spacing. */
.roster { margin-top: 2.5rem; }

.criteria { padding-left: 1.2rem; }
.criteria li { margin-bottom: 0.5rem; break-inside: avoid; }

.court-list { list-style: none; margin: 0; padding: 0; }
.court-list li { border-bottom: 1px solid var(--color-border); }
.court-list li a { display: block; padding: 0.95rem 0; text-decoration: none; font-weight: 600; }
.court-list li a:hover { color: var(--color-accent); }

.cta { margin-top: 2rem; text-align: center; }   /* center buttons within their row */
/* Button vertically centered against the column beside it (grid row centering). */
.cols-2.align-center { align-items: center; }
.button-center { margin: 0; text-align: center; }

/* ---------- Carousel (transform-based, seamless loop) ---------- */
.carousel { position: relative; overflow: hidden; }
.carousel-track {
  display: flex;
  gap: 1rem;
  will-change: transform;
}
.carousel-slide {
  flex: 0 0 100%;
  margin: 0;
  position: relative;
}
/* Crop ~15% off each side of the 4:1 source so slides are a bit taller. */
.carousel-slide img { width: 100%; aspect-ratio: 14 / 5; height: auto; display: block; object-fit: cover; object-position: center; }
.carousel-slide figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(70, 30, 94, 0.65);   /* matches the hero overlay's purple */
  color: #fff;
  padding: 0.15rem 0.5rem;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(29, 36, 45, 0.7);
  border: 0;
  width: 44px;
  height: 44px;
  font-size: 1.5rem;
  cursor: pointer;
  color: #fff;
}
.carousel-nav.prev { left: 0; }
.carousel-nav.next { right: 0; }
.carousel-nav:hover { background: rgba(29, 36, 45, 0.9); }
.carousel-nav:focus-visible { background: rgba(29, 36, 45, 0.9); outline: 2px solid #fff; outline-offset: -2px; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { margin: 0 0 1.5rem; font-size: 0.9rem; line-height: 1.4; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.breadcrumb li { display: flex; align-items: center; color: var(--color-body); }
.breadcrumb li + li::before { content: "\203A"; margin: 0 0.5rem; color: var(--color-border); }
.breadcrumb a { color: var(--color-purple-bright); }
.breadcrumb a:hover { color: var(--color-purple); }
.breadcrumb [aria-current="page"] { color: var(--color-body); font-weight: 600; }

/* ---------- Page intro ---------- */
.page-intro { max-width: 70ch; margin: 0 0 1.75rem; }

/* ---------- Calendar embed ---------- */
.calendar-embed iframe { width: 100%; min-height: 600px; border: 1px solid var(--color-border); }

/* ---------- Footer ----------
   Light-grey widget area with the colour logo (matches the original). */
.site-footer { background: #ededed; color: var(--color-body); margin-top: 0; }
.footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  padding: 3.5rem 1.5rem;
  align-items: start;
}
.footer-col h3 { color: var(--color-heading); font-size: 1.15rem; margin-bottom: 1rem; }
.footer-col address { color: var(--color-body); }
.footer-col address a { color: var(--color-body); text-decoration: underline; }
.footer-col address a:hover { color: var(--color-accent); }
.footer-logo { max-height: 44px; width: auto; }
.footer-nav { list-style: none; margin: 0; padding: 0; }
.footer-nav li a { color: var(--color-body); text-decoration: none; line-height: 2.1; }
.footer-nav li a:hover { color: var(--color-accent); }
.footer-bar { background: #e6e6e6; font-size: 0.8125rem; color: rgba(74, 78, 87, 0.7); }
.footer-bar .container { padding-top: 1.25rem; padding-bottom: 1.25rem; }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 2px;
  background: #333a45;
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  z-index: 90;
}
.to-top[hidden] { display: none; }
.to-top:hover { background: #1d242d; }
.to-top:focus-visible { background: #1d242d; outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ---------- Small screens: tighten hero & spacing ---------- */
@media (max-width: 600px) {
  body { font-size: 16px; }
  .hero-home { min-height: 340px; }
  .hero-page { min-height: 180px; }
  .hero-plain { min-height: 150px; }
  .hero-content { padding: 2rem 1.25rem; }
  .section { padding: 2.5rem 0; }
  .header-top-inner { min-height: 64px; }
  .brand img { height: 34px; }
}

/* ---------- Tablet & up: multi-column content (>= 800px) ---------- */
@media (min-width: 800px) {
  .cols-3 { grid-template-columns: repeat(3, 1fr); }
  .cols-2 { grid-template-columns: repeat(2, 1fr); }
  .people { grid-template-columns: repeat(auto-fill, minmax(220px, 250px)); }
  .carousel-slide { flex-basis: calc((100% - 2rem) / 3); }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
}

/* ---------- Admin (backoffice) ----------
   Lightweight chrome distinct from the public site: full-width topbar, plain
   data tables, single-column forms. Re-uses the public palette and fonts. */
body.admin { background: #f7f7f8; }

/* Light-purple bar so the dark brand mark reads cleanly. The tint is a tint
   of the brand --color-purple (#630052). */
.admin-header { background: #ebd9e5; color: var(--color-heading); border-bottom: 1px solid #d9c2d1; }
.admin-header a { color: var(--color-heading); }
.admin-header a:hover { color: var(--color-purple-bright); }
.admin-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
}
.admin-header .brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.admin-header .brand img { height: 24px; width: auto; }
.admin-tag {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  color: var(--color-purple);
  border: 1px solid rgba(99, 0, 82, 0.3);
  border-radius: 3px;
}

.admin-nav { display: flex; align-items: center; gap: 1.25rem; font-size: 0.95rem; }
.admin-nav a { padding: 0.25rem 0; }
.admin-nav a.active { color: var(--color-purple); font-weight: 600; }
.admin-nav .admin-user { color: rgba(33, 41, 52, 0.65); font-size: 0.85rem; }

.admin-main { padding: 2.5rem 0; min-height: calc(100vh - 200px); }
.admin-footer {
  background: #ededed;
  font-size: 0.85rem;
  color: var(--color-body);
  padding: 1rem 0;
}
.admin-footer .container { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.admin-flash, .admin-error {
  padding: 0.75rem 1rem;
  border-radius: 4px;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}
.admin-flash { background: #e8f5ec; color: #1f5b34; border: 1px solid #b9e2c6; }
.admin-error { background: #fdecea; color: #8a1f1f; border: 1px solid #f5c2c0; }

.admin-section { background: #fff; padding: 2rem; border: 1px solid var(--color-border); border-radius: 6px; }
.admin-section-narrow { max-width: 520px; margin: 0 auto; }
.admin-section + .admin-section { margin-top: 1.5rem; }
.admin-section h1 { font-size: 1.75rem; margin-top: 0; }
.admin-section-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.admin-section-header h1 { margin: 0; }

.admin-card-grid { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.admin-card-grid a { display: block; padding: 1.25rem; border: 1px solid var(--color-border); border-radius: 6px; color: var(--color-heading); }
.admin-card-grid a:hover { border-color: var(--color-accent); color: var(--color-heading); }
.admin-card-grid h2 { font-size: 1.2rem; color: var(--color-purple); margin: 0 0 0.4rem; }
.admin-card-grid p { margin: 0; font-size: 0.9rem; }

.admin-form { display: grid; gap: 1rem; }
.admin-form label { display: grid; gap: 0.25rem; font-size: 0.9rem; }
.admin-form label > span { font-weight: 600; color: var(--color-heading); }
.admin-form input[type="text"],
.admin-form input[type="email"],
.admin-form input[type="password"],
.admin-form input[type="number"],
.admin-form select,
.admin-form textarea {
  font: inherit;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: #fff;
  color: var(--color-heading);
}
.admin-form textarea { font-family: inherit; resize: vertical; }
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 0;
  border-color: var(--color-accent);
}
.admin-form input[disabled] { background: #f4f4f4; color: var(--color-body); }
.admin-form .hint { font-style: normal; font-weight: 400; color: var(--color-body); font-size: 0.8rem; }
.admin-form-actions { display: flex; gap: 1rem; justify-content: flex-end; align-items: center; margin-top: 0.5rem; }

.admin-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.admin-table th, .admin-table td { text-align: left; padding: 0.7rem 0.5rem; border-bottom: 1px solid var(--color-border); }
.admin-table th { font-family: var(--font-heading); font-weight: 600; color: var(--color-heading); }
.admin-table td.num, .admin-table th.num { text-align: right; }
.admin-table td.actions, .admin-table th.actions { text-align: right; white-space: nowrap; }
.admin-table td.actions a { margin-right: 0.75rem; }

.button-link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--color-purple); font: inherit; text-decoration: underline; }
.button-link:hover { color: var(--color-purple-bright); }
.button-link.danger { color: #b3261e; }
.button-link.danger:hover { color: #7a1812; }
form.inline { display: inline; }

/* ---------- Inline nav (>= 992px) ----------
   The long serif menu needs room, so the inline bar only appears once it
   fits; narrower screens use the hamburger. Items align flush with the
   content container edges (first item left, last item right) and the font
   scales with the viewport so it never wraps or overflows. */
@media (min-width: 992px) {
  /* The nav bar is always visible on desktop, so the sticky header is taller
     (logo row + nav bar) — widen the anchor offset to match. */
  :root { --header-offset: 150px; }

  .nav-toggle { display: none; }

  .navbar { display: block; }
  .nav-list { display: flex; align-items: stretch; justify-content: space-between; }
  .nav-list > li { position: relative; }
  .nav-list > li > a {
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 0.6rem;
    font-size: clamp(0.95rem, 1.45vw, 1.125rem);  /* scale 15→18px */
  }
  .nav-list > li:first-child > a { padding-left: 0; }   /* flush with content */
  .nav-list > li:last-child > a { padding-right: 0; }
  .nav-list > li > a:hover,
  .nav-list > li.active > a { color: var(--color-purple-bright); background: transparent; }

  .dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    padding: 0.5rem 0;
    background: #fff;
    border: 1px solid var(--color-border);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    border-radius: 0 0 2px 2px;
    z-index: 110;
  }
  .dropdown li a { padding: 0.6rem 1.25rem; }
  .dropdown li a:hover { background: #f9f9fb; }
  .has-dropdown:hover .dropdown,
  .has-dropdown:focus-within .dropdown { display: block; }
}