/* ==============================================================
 * Fight Fibrolamellar – site styles
 * Visual style modelled on https://www.fightfibrolamellar.org/
 * Mobile-first: base rules are for phones, media queries add up.
 * ============================================================== */

:root {
  --ff-navy: #1f3c78;
  --ff-ink: #484848;      /* headings, buttons */
  --ff-text: #666666;     /* body copy (darker than reference #8e8e8e for WCAG AA contrast) */
  --ff-link: #3a8496;     /* teal link (reference #5199a8, darkened for contrast) */
  --ff-line: #d0d0d0;
  --ff-soft: #f6f6f6;
  --ff-footer: #f9f9f9;
}

body {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--ff-text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ff-link); }
a:hover, a:focus { color: var(--ff-navy); }
img { max-width: 100%; height: auto; }

#skip-to-content.sr-only-focusable:focus {
  position: absolute; top: 8px; left: 8px; z-index: 1000;
  background: var(--ff-navy); color: #fff; padding: 8px 14px; border-radius: 3px;
}

/* --------------------------------------------------------------
 * Header
 * -------------------------------------------------------------- */
/* RU logo + search bar (same logo and search form as the previous template) */
#ff-rubar {
  border-bottom: 1px solid #ececec;
  font-size: 12px;
}
#ff-rubar .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 20px;
  padding-top: 12px;
  padding-bottom: 12px;
}
/* Bootstrap's clearfix pseudo-elements become stray flex items; remove them */
#ff-rubar .container::before, #ff-rubar .container::after,
#ff-brand::before, #ff-brand::after { display: none; }
#ff-rulogo img { display: block; width: 260px; max-width: 100%; height: auto; }
#ff-rubar-right { display: flex; align-items: center; gap: 12px; flex: 1 1 100%; }
#mainSearch { display: flex; flex: 1; margin: 0; }
#mainSearch input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--ff-line);
  border-right: 0;
  border-radius: 2px 0 0 2px;
  font: 500 13px 'Raleway', sans-serif;
  color: #333;
}
#mainSearch input[type="text"]::placeholder { color: #8a8a8a; }
#mainSearch button {
  padding: 6px 12px;
  background: #949494;
  border: 0;
  border-radius: 0 2px 2px 0;
  color: #fff;
  font: 500 12px 'Raleway', sans-serif;
  text-transform: uppercase;
}
#mainSearch button:hover, #mainSearch button:focus { background: var(--ff-ink); }
#ff-rubar .ff-rubar-donate {
  padding: 6px 14px;
  background: var(--ff-navy);
  border-radius: 2px;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: none;
}
#ff-rubar .ff-rubar-donate:hover { background: var(--ff-ink); }

#ff-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}
#ff-logo img { display: block; width: 170px; height: auto; }

#ff-menu-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--ff-line);
  border-radius: 3px;
  padding: 8px 12px;
  color: var(--ff-ink);
  font: 500 13px 'Raleway', sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
}
.ff-burger { display: inline-block; width: 18px; }
.ff-burger span {
  display: block; height: 2px; margin: 3px 0;
  background: var(--ff-ink); transition: transform .2s, opacity .2s;
}
#ff-menu-toggle[aria-expanded="true"] .ff-burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
#ff-menu-toggle[aria-expanded="true"] .ff-burger span:nth-child(2) { opacity: 0; }
#ff-menu-toggle[aria-expanded="true"] .ff-burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Nav: collapsed panel on phones */
#ff-nav { display: none; border-top: 1px solid #ececec; }
#ff-nav.is-open { display: block; }
.ff-menu { list-style: none; margin: 0; padding: 6px 0 12px; }
.ff-menu li a {
  display: block;
  padding: 11px 4px;
  border-bottom: 1px solid #f0f0f0;
  color: #767676;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
}
.ff-menu li:last-child a { border-bottom: 0; }
.ff-menu li a:hover,
.ff-menu li a:focus,
.ff-menu li.active a { color: var(--ff-ink); }

/* --------------------------------------------------------------
 * Hero (page CMS content may override background-image)
 * -------------------------------------------------------------- */
#masthead-container { background: var(--ff-soft); }
#masthead-img {
  max-width: 1280px;
  height: 160px;
  margin: 0 auto;
  background: url('/images/masthead/header1.jpg') no-repeat center center;
  background-size: cover;
}
/* Home page shows the group photo as the hero now, so hide the
   duplicate phone-only copy embedded in the CMS content. */
#group-photo, .mobile-only { display: none !important; }

/* --------------------------------------------------------------
 * Content
 * -------------------------------------------------------------- */
#content { padding-top: 28px; padding-bottom: 40px; }
#content-inner-container { margin: 0; }
#content-main { padding-left: 0; padding-right: 0; }
#content-main::after { content: ""; display: table; clear: both; }

#content-main h2 {
  font-family: 'Lora', Georgia, serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.25;
  color: var(--ff-ink);
  margin: 0 0 20px;
}
#content-main h3,
#content-main h4 {
  font-family: 'Lora', Georgia, serif;
  font-weight: 400;
  color: var(--ff-ink);
  line-height: 1.3;
}
#content-main h3 { font-size: 21px; margin: 28px 0 10px; }
#content-main h4 { font-size: 18px; margin: 26px 0 8px; }
#content-main p { margin: 0 0 18px; }
#content-main strong { color: #555; font-weight: 700; }

/* "Here's a quiz:", "none.", etc. – bold italic in navy like the reference */
#content-main strong em,
#content-main em strong {
  font-family: 'Raleway', sans-serif;
  font-style: italic;
  font-weight: 700;
  color: var(--ff-navy);
}
#content-main > p:first-of-type > strong:first-of-type > em:only-child { font-size: 1.6em; line-height: 1.1; }

/* Floated side boxes / images from the CMS: stack on phones */
#content-main [style*="float: right"],
#content-main [style*="float:right"],
#content-main .breakout {
  float: none !important;
  width: auto !important;
  margin: 0 0 20px !important;
}

/* Repository "breakout" box */
#content-main .breakout {
  border: 0 !important;
  background: var(--ff-soft);
  border-left: 3px solid var(--ff-navy) !important;
  padding: 14px 16px !important;
  font-size: 14px;
  line-height: 1.5;
}
#content-main .breakout-inner { border: 0 !important; padding: 0 !important; }
#content-main .breakout-inner h4 { margin-top: 0; font-size: 16px; }

/* Home page project cards (.col-md-4 blocks in CMS content) */
#content-main > .col-md-4 {
  text-align: center;
  padding: 0 0 32px;
}
#content-main > .col-md-4 img {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
#content-main > .col-md-4 h3 { font-size: 22px; margin: 16px 0 10px; }
#content-main > .col-md-4 h3 a { color: var(--ff-ink); text-decoration: none; }
#content-main > .col-md-4 h3 a:hover { color: var(--ff-navy); }
#content-main > .col-md-4 p { font-size: 14.5px; }
#content-main > .col-md-4 h3 + p::after {
  content: "Donate";
  display: block;
  width: max-content;
  margin: 16px auto 0;
  padding: 7px 20px;
  background: var(--ff-ink);
  color: #fff;
  font-size: 13px;
  letter-spacing: .03em;
}
/* Make the whole card's donate button clickable via the card image link */
#content-main > .col-md-4 { position: relative; }
#content-main > .col-md-4 > a:first-child::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
#content-main > .col-md-4 h3 a { position: relative; z-index: 2; }

/* Lists without bullets (About > In the News) */
#content-main ul[style*="list-style-type: none"] li { padding: 3px 0; }

/* Forms (contact page) */
#content-main form label { font-weight: 700; color: var(--ff-ink); margin-bottom: 4px; }
#content-main input[type="text"],
#content-main input[type="email"],
#content-main textarea {
  display: block;
  width: 100%;
  max-width: 520px;
  padding: 9px 11px;
  border: 1px solid var(--ff-line);
  border-radius: 2px;
  font: inherit;
  color: #333;
}
#content-main input:focus,
#content-main textarea:focus { outline: 2px solid var(--ff-link); outline-offset: 1px; }
.g-recaptcha { margin-bottom: 18px; max-width: 100%; overflow: hidden; }

/* Buttons */
.ff-btn,
#content-main .submit {
  display: inline-block;
  padding: 9px 22px;
  background: var(--ff-ink) !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #fff !important;
  font: 500 14px 'Raleway', sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: none;
  cursor: pointer;
}
.ff-btn:hover, .ff-btn:focus,
#content-main .submit:hover { background: var(--ff-navy) !important; color: #fff; text-decoration: none; }

/* --------------------------------------------------------------
 * Footer
 * -------------------------------------------------------------- */
#ff-footer {
  background: var(--ff-footer);
  border-top: 1px solid #eee;
  padding: 36px 0 20px;
  font-size: 14px;
}
#ff-footer h4 {
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ff-ink);
  margin: 0 0 10px;
}
.ff-footer-col { margin-bottom: 26px; }
#ff-footer-legal {
  border-top: 1px solid #e6e6e6;
  padding-top: 18px;
  font-size: 12px;
  color: #777;
  text-align: center;
}
#ff-footer-legal a { color: #777; }
.ff-social a { display: inline-block; margin: 0 8px 6px; }

/* ==============================================================
 * Tablet and up
 * ============================================================== */
@media (min-width: 600px) {
  #content-main [style*="float: right"],
  #content-main [style*="float:right"],
  #content-main .breakout {
    float: right !important;
    max-width: 45%;
    margin: 4px 0 16px 24px !important;
  }
  #content-main .breakout { width: 300px !important; }
}

@media (min-width: 768px) {
  #ff-rubar .container { flex-wrap: nowrap; padding-top: 18px; padding-bottom: 18px; }
  #ff-rulogo img { width: 312px; }
  #ff-rubar-right { flex: 0 1 auto; }
  #mainSearch input[type="text"] { width: 200px; flex: none; }

  #ff-brand { justify-content: center; padding-top: 30px; padding-bottom: 18px; }
  #ff-logo img { width: 240px; }
  #ff-menu-toggle { display: none; }

  /* Centered horizontal menu with rules on either side */
  #ff-nav, #ff-nav.is-open { display: block; border-top: 0; padding-bottom: 24px; }
  #ff-nav .container { display: flex; align-items: center; gap: 18px; }
  #ff-nav .container::before,
  #ff-nav .container::after { content: ""; flex: 1; height: 1px; background: var(--ff-line); }
  .ff-menu { display: flex; flex-wrap: wrap; justify-content: center; padding: 0; }
  .ff-menu li a {
    border: 0;
    padding: 7px 12px;
    font-size: 13px;
    color: #767676;
  }
  .ff-menu li.active a { background: var(--ff-soft); color: var(--ff-ink); }

  #masthead-img { height: 260px; }
  #content { padding-top: 48px; }
  #content-main h2 { font-size: 30px; }

  .ff-footer-col { margin-bottom: 18px; }
  #ff-footer-legal { text-align: left; display: flex; justify-content: space-between; gap: 20px; }
  #ff-footer-legal p { margin: 0; }
  #ff-footer-legal .ff-social { order: 2; text-align: right; }
  .ff-social a { margin: 0 0 6px 12px; }
}

@media (min-width: 768px) and (max-width: 991px) {
  /* keep the menu on one line on tablets */
  #ff-nav .container { gap: 8px; }
  .ff-menu { flex-wrap: nowrap; }
  .ff-menu li a { padding: 7px 7px; font-size: 12px; letter-spacing: .02em; white-space: nowrap; }
}

@media (min-width: 992px) {
  #masthead-img { height: 350px; }
  #content-main { max-width: 900px; margin: 0 auto; float: none; }
  /* cards sit three across */
  #content-main > .col-md-4 { padding: 0 14px 20px; }

  /* Pages with project cards: lay content out on a 3-column grid so the
     cards share row heights (image / title / blurb+button line up).
     Scoped with :has() so float-based pages are unaffected. */
  #content-main:has(> .col-md-4) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 28px;
  }
  #content-main:has(> .col-md-4) > :not(.col-md-4) { grid-column: 1 / -1; }
  #content-main:has(> .col-md-4)::after { display: none; }
  #content-main:has(> .col-md-4) > .col-md-4 {
    float: none;
    width: auto;
    padding: 0 0 20px;
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  #content-main:has(> .col-md-4) > .col-md-4 > a:first-child { display: block; }
  #content-main:has(> .col-md-4) > .col-md-4 h3 { align-self: center; }
  /* blurb fills its row; Donate button pinned to the bottom so all three line up */
  #content-main:has(> .col-md-4) > .col-md-4 h3 + p {
    display: flex;
    flex-direction: column;
    margin: 0;
  }
  #content-main:has(> .col-md-4) > .col-md-4 h3 + p::after { margin-top: auto; }
  #content-main:has(> .col-md-4) > .col-md-4 h3 + p::before {
    /* spacer so the button keeps its gap above even in the tallest card */
    content: ""; order: 1; height: 16px; flex: none;
  }
  #content-main:has(> .col-md-4) > .col-md-4 h3 + p::after { order: 2; }
}