/* -----------------------------------------------------------
   GLOBAL
----------------------------------------------------------- */

/* Global content width */
.content {
  max-width: 630px;
  margin: 40px auto;
}

body {
  margin: 0;
  font-family: Calibri, Arial, Helvetica, sans-serif;
  background: #f4f7fa;
  color: #1a1a1a;
  line-height: 1.6;
  /* font-size: 1.15rem; */
}

/* Remove underline from ALL links globally */
a {
  color: #2b4c6f;
  text-decoration: none;
}

/* Keep hover color change but NO underline */
a:hover {
  text-decoration: none;
}

/* Dark background for all subpages */
body.subpage {
  background: #2b3a4a; /* same tone as section-dark */
}

/* Year links -- same rule, no underline */
a.year-link {
  text-decoration: none;
}

a.year-link:hover {
  text-decoration: none;
}


/* -----------------------------------------------------------
   HERO (shared across all pages via _includes/header.html)
----------------------------------------------------------- */

.hero {
  background: linear-gradient(135deg, #2b4c6f 0%, #4f7ca6 60%, #7fa6c9 100%);
  padding: 50px 20px 40px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  flex-wrap: wrap;
}

.hero img {
  width: 120px;
  height: auto;
}

.hero-text {
  max-width: 630px;
  text-align: left;
}

.hero-text h1 {
  margin: 0;
  font-size: 2.2em;
  font-weight: 700;
  color: #ffffff;
}

.hero-text p {
  margin-top: 10px;
  font-size: 1.15em;
  color: #e8eef2;
}

@media (min-width: 700px) {
  .hero-text {
    white-space: nowrap;
  }
}

.hero-text p {
  color: #ffd166;
}

.hero-link-wrapper {
  display: block;
  text-decoration: none;
  color: inherit;
}

.hero-link-wrapper:hover {
  text-decoration: none;
  color: inherit;
}

.hero-text h1 {
  margin: 0;
  font-size: 2.2em;
  font-weight: 700;
  /* remove or comment out the hard color */
  /* color: #ffffff; */
}

/* rainbow title style */
.rainbow-title {
  background: linear-gradient(
    90deg,
    #ff0000,
    #ff7f00,
    #ffff00,
    #00ff00,
    #0000ff,
    #4b0082,
    #9400d3
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* if you want to be extra explicit with specificity: */
.hero-text .rainbow-title {
  color: transparent;
}



/* ----------------------------------------------------------- SECTION
   STYLES - Dark: index.html - Light: all subpages
   ----------------------------------------------------------- */

/* DARK SECTIONS (index.html only) */
.section-dark {
  background: #2b3a4a;
  color: #e8eef2;
  padding: 40px 20px;
  max-width: 630px;
  margin: 40px auto;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.section-dark h2 {
  color: #ffd166;
  border-bottom: 3px solid #ffd166;
  padding-bottom: 5px;
  margin-bottom: 15px;
}

.section-dark a {
  color: #ffd166; /* gold */
  text-decoration: none;
}

.section-dark a:hover {
  color: #ffeb9a; /* lighter gold for hover */
  text-decoration: none;
}


/* LIGHT SECTIONS (all subpages) */
.section-light {
  background: #ffffff;
  color: #1a1a1a;
  padding: 40px 20px;
  max-width: 630px;
  margin: 40px auto;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.section-light h2,
.section-light h3 {
  color: #2b4c6f;
  padding-bottom: 5px;
  margin-bottom: 15px;
  border-bottom: 3px solid #ffd166; /* default gold */
}

.section-light ul {
  padding-left: 20px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.section-light li {
  margin-bottom: 8px;
}


/* -----------------------------------------------------------
   SPECIAL: RAINBOW UNDERLINE (Frameline page only)
----------------------------------------------------------- */

.rainbow-underline {
  border-bottom: 6px solid transparent;
  border-image: linear-gradient(
    90deg,
    #ff0000,
    #ff7f00,
    #ffff00,
    #00ff00,
    #0000ff,
    #4b0082,
    #9400d3
  ) 1;
}


/* -----------------------------------------------------------
   FOOTER
----------------------------------------------------------- */

footer {
  background: #2b4c6f;
  color: #ffffff;
  text-align: center;
  padding: 20px;
  margin-top: 40px;
  font-size: 0.95em;
}

footer a {
  color: #ffd166; /* gold */
}

footer a:hover {
  color: #ffeb9a; /* lighter gold */
}

footer .footer-social {
  margin-top: 10px;
  font-size: 0.95em;
}

footer .footer-social a {
  color: #ffd166;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

footer .footer-social a:hover {
  color: #ffeb9a;
}

footer .footer-social svg {
  vertical-align: middle;
}

.footer-social .separator {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  color: #ffd166;
}

/* -----------------------------------------------------------
   Subpage Layout (matches other pages but narrower for members)
   ----------------------------------------------------------- */
.subpage-content {
  max-width: 350px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

/* -----------------------------------------------------------
   Member List (soft, readable, matches site palette)
----------------------------------------------------------- */

ul.member-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* Member card */
ul.member-list li {
  background: #36485a;          /* softer navy-gray */
  border: 1px solid #4a5c6e;    /* subtle slate border */
  border-radius: 6px;
  padding: 12px 14px;
  margin: 12px 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  line-height: 1.35;
  color: #e8eef2;               /* soft light gray text */
  text-align: center;
}

/* Member name */
ul.member-list li strong {
  font-size: 1.05rem;
  display: inline;
  margin: 0;
  padding: 0;
  color: #ffffff;               /* soft white, not harsh */
}

/* Outlet text (non-link) */
ul.member-list li {
  color: #d6dce2;               /* softer gray for outlets */
}

/* Outlet links */
ul.member-list li a {
  color: #9fc3ff;               /* soft blue, distinct from name */
  text-decoration: none;
}

ul.member-list li a:hover {
  color: #cfe2ff;               /* lighter blue on hover */
  text-decoration: underline;
}