@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&display=swap");

/* ===================================================================
   FRASER FOR STRATFORD - site styles
   Olive carries the identity, white carries the page, gold is the
   accent. Written 31 Aug 2026 from the site audit.
   The !important flags override background colours set section by
   section in the page editor. If those are cleared in the editor,
   the flags here can come out.
   =================================================================== */

/* --- 1. Text colour ------------------------------------------------ */
:root {
  --font-color: #23261B;
  --secondary-contrast: #23261B;
  --secondary-hovercontrast: #23261B;
}

/* --- 2. Type: Montserrat for display, Source Sans 3 for reading ---- */
#site-wrapper,
#site-wrapper p,
#site-wrapper li,
#site-wrapper td,
#site-wrapper label,
#site-wrapper input,
#site-wrapper textarea,
#site-wrapper select,
#site-wrapper .form-control {
  font-family: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif !important;
}

#site-wrapper h1,
#site-wrapper h2,
#site-wrapper h3,
#site-wrapper h4,
#site-wrapper h5,
#site-wrapper h6,
#site-wrapper .btn,
#site-wrapper .fa-header,
#site-wrapper .navbar-nav a,
#site-wrapper .nav a {
  font-family: "Montserrat", Helvetica, Arial, sans-serif !important;
}

#site-wrapper p,
#site-wrapper li {
  font-size: 18px;
  line-height: 1.6;
}

/* --- 3. Sections: gold page grounds become white ------------------- */
#site-wrapper .line.site_line__item[style*="E9A33A"],
#site-wrapper .line.site_line__item[style*="e9a33a"] {
  background-color: #FFFFFF !important;
}

#site-wrapper .line-secondary {
  background-color: #F7F5EF !important;
}

body.pageid-156007 #site-wrapper .line-secondary,
body.pageid-156007 #site-wrapper .line-secondary.site_line__item[style*="e9a33a"],
body.pageid-156007 #site-wrapper .line-secondary.site_line__item[style*="E9A33A"] {
  background-color: #E9A33A !important;
}

/* --- 4. Headings in Deep Olive ------------------------------------- */
#site-wrapper h1,
#site-wrapper h2,
#site-wrapper .line .container h1,
#site-wrapper .line-secondary h1,
#site-wrapper .line-secondary h2 {
  color: #4A5335 !important;
}

#site-wrapper h3,
#site-wrapper h4 {
  color: #23261B !important;
}

body.pageid-156007 #site-wrapper .line-secondary h1,
body.pageid-156007 #site-wrapper .line-secondary h2,
body.pageid-156007 #site-wrapper .line-secondary h3 {
  color: #23261B !important;
}

#site-wrapper .line-secondary,
#site-wrapper .line-secondary p,
#site-wrapper .line-secondary li,
#site-wrapper .line-secondary span,
#site-wrapper .line-secondary a:not(.btn) {
  color: #23261B !important;
}

/* --- 5. Navigation: white bar, Ring Gold hairline ------------------ */
#site-wrapper .line-menu {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #C9A25A;
}

#site-wrapper .line-menu .navbar-nav > li > a,
#site-wrapper .line-menu .nav > li > a {
  color: #4A5335 !important;
}

#site-wrapper .line-menu .navbar-nav > li.active > a,
#site-wrapper .line-menu .nav > li.active > a,
#site-wrapper .line-menu .navbar-nav > li > a:hover,
#site-wrapper .line-menu .nav > li > a:hover {
  color: #23261B !important;
  box-shadow: inset 0 -3px 0 #E9A33A;
}

/* --- 6. Footer: Deep Olive ground, white text is 8.14:1 ------------ */
#site-wrapper .line-footer {
  background-color: #4A5335 !important;
}

#site-wrapper .line-footer,
#site-wrapper .line-footer h1,
#site-wrapper .line-footer h2,
#site-wrapper .line-footer h3,
#site-wrapper .line-footer h4,
#site-wrapper .line-footer p,
#site-wrapper .line-footer li,
#site-wrapper .line-footer span,
#site-wrapper .line-footer a {
  color: #FFFFFF !important;
}

#site-wrapper .line-footer img[src*="badge"] {
  border-radius: 50%;
  box-shadow: 0 0 0 5px #FFFFFF;
}

/* --- 7. Full-width sections ---------------------------------------- */
#site-wrapper .line > .container {
  width: 100%;
  max-width: 100%;
  padding-left: 48px;
  padding-right: 48px;
}

@media (max-width: 991px) {
  #site-wrapper .line > .container {
    padding-left: 28px;
    padding-right: 28px;
  }
}

@media (max-width: 575px) {
  #site-wrapper .line > .container {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* --- 8. Home hero: portrait cut to the height of the headline ------ */
#site-wrapper .line-secondary .row,
#site-wrapper .line-secondary .row-fluid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

#site-wrapper .line-secondary .zone-image img {
  display: block;
  max-height: 420px;
  width: auto;
  margin: 0 auto;
}

/* --- 9. Buttons: gold for the volunteer ask, olive for the donation - */
#site-wrapper a.btn[href*="get-involved"] {
  background-color: #E9A33A !important;
  border-color: #E9A33A !important;
  color: #23261B !important;
}

#site-wrapper a.btn[href*="get-involved"]:hover {
  background-color: #C9A25A !important;
  border-color: #C9A25A !important;
}

/* --- 10. Forms: white fields, olive card --------------------------- */
#site-wrapper .form-control,
#site-wrapper input[type="text"],
#site-wrapper input[type="email"],
#site-wrapper input[type="tel"],
#site-wrapper textarea,
#site-wrapper select {
  background-color: #FFFFFF !important;
  color: #23261B !important;
  border: 1px solid #C9A25A !important;
}

#site-wrapper .form-control:focus {
  border-color: #4A5335 !important;
  outline: 2px solid #E9A33A;
  outline-offset: 1px;
}

#site-wrapper .zone-contact > .content {
  max-width: 820px;
  margin: 0 auto;
  padding: 34px 36px 40px;
  background: #4A5335;
  border-radius: 4px;
}

#site-wrapper .zone-contact > .content label,
#site-wrapper .zone-contact > .content .control-label,
#site-wrapper .zone-contact > .content legend,
#site-wrapper .zone-contact > .content h1,
#site-wrapper .zone-contact > .content h2,
#site-wrapper .zone-contact > .content h3,
#site-wrapper .zone-contact > .content p {
  color: #FFFFFF !important;
}

#site-wrapper .zone-contact > .content .btn {
  background-color: #E9A33A !important;
  border-color: #E9A33A !important;
  color: #23261B !important;
}

#site-wrapper .zone-contact .form-group > div[class*="col-"] {
  width: 100% !important;
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* ===================================================================
   PLATFORM - the five pillars
   =================================================================== */
@media (min-width: 992px) {

  #site-wrapper .fa-accordion {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 30px;
    align-items: end;
    max-width: 1080px !important;
    margin: 0 auto !important;
  }

  #site-wrapper .fa-item { display: contents !important; }

  #site-wrapper .fa-item .fa-header { grid-row: 1; }
  #site-wrapper .fa-item:nth-child(1) .fa-header { grid-column: 1; }
  #site-wrapper .fa-item:nth-child(2) .fa-header { grid-column: 2; }
  #site-wrapper .fa-item:nth-child(3) .fa-header { grid-column: 3; }
  #site-wrapper .fa-item:nth-child(4) .fa-header { grid-column: 4; }
  #site-wrapper .fa-item:nth-child(5) .fa-header { grid-column: 5; }

  #site-wrapper .fa-item .fa-panel {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  #site-wrapper .fa-accordion .fa-header {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    margin: 0;
    padding: 52px 14px 56px;
    border: 0;
    border-left: 1px solid rgba(201, 162, 90, .55);
    border-right: 1px solid rgba(201, 162, 90, .55);
    border-radius: 0;
    background-color: #F7F5EF;
    background-image: repeating-linear-gradient(90deg, transparent 0 15px, rgba(201, 162, 90, .20) 15px 16px);
    color: #4A5335;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    text-align: center;
    hyphens: auto;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
  }

  #site-wrapper .fa-accordion .fa-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: -9px;
    right: -9px;
    height: 18px;
    background: #4A5335;
    border-bottom: 3px solid #C9A25A;
  }

  #site-wrapper .fa-accordion .fa-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -11px;
    right: -11px;
    height: 22px;
    background: #4A5335;
    border-top: 3px solid #C9A25A;
  }

  #site-wrapper .fa-accordion .fa-header:hover {
    background-color: #EFEDE3;
  }

  #site-wrapper .fa-accordion .fa-header:focus-visible {
    outline: 3px solid #E9A33A;
    outline-offset: 4px;
  }

  #site-wrapper .fa-item.fa-open .fa-header {
    background-color: #4A5335;
    background-image: repeating-linear-gradient(90deg, transparent 0 15px, rgba(255, 255, 255, .12) 15px 16px);
    color: #FFFFFF;
  }

  #site-wrapper .fa-item.fa-open .fa-header::after {
    background: #E9A33A;
    border-top-color: #4A5335;
  }

  #site-wrapper .fa-accordion .fa-panel-content {
    max-width: 74ch;
    margin: 30px auto 0;
    padding: 4px 0 4px 30px;
    border-left: 4px solid #4A5335;
    background: #FFFFFF;
    color: #23261B;
    font-size: 18px;
    line-height: 1.62;
  }
}


/* --- 11. Donate: the raised/goal dial is hidden until there is a
   number worth showing. Delete this one rule to bring it back. ----- */
#site-wrapper .thermometer-wrapper {
  display: none;
}

/* --- 12. Get Involved sign-up form -------------------------------- */
#site-wrapper .gi .gi-check,
#site-wrapper .gi .gi-check span,
#site-wrapper .gi .gi-intro,
#site-wrapper .gi label,
#site-wrapper .gi legend {
  color: #FFFFFF !important;
}

#site-wrapper .gi .gi-note {
  color: #E3E1D0 !important;
}

body.pageid-156014 #site-wrapper .zone-50 {
  width: 100%;
}


/* --- 13. The .gi card: shared by Get Involved and Contact --------- */
#site-wrapper .gi { max-width: 760px; margin: 0 auto; }
#site-wrapper .gi .gi-card { background: #4A5335; border-radius: 4px; padding: 34px 36px 38px; }
#site-wrapper .gi .gi-intro { color: #FFFFFF !important; font-size: 18px; line-height: 1.6; margin: 0 0 20px; }
#site-wrapper .gi .gi-intro strong { color: #FFFFFF !important; }
#site-wrapper .gi .gi-note { color: #E3E1D0 !important; font-size: 16px; margin: 22px 0 0; line-height: 1.55; }
#site-wrapper .gi .gi-card a { color: #E9A33A !important; text-decoration: underline; }
#site-wrapper .gi .gi-card a:hover { color: #FFFFFF !important; }


/* --- 14. Content blocks added 31 Aug ------------------------------ */
#site-wrapper .gi-lead {
  font-size: 19px;
  line-height: 1.55;
  color: #23261B;
  max-width: 68ch;
  margin: 0 0 26px;
}

#site-wrapper .pillar-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  gap: 2px;
  max-width: 920px;
}

#site-wrapper .pillar-list li {
  background: #F7F5EF;
  border-left: 4px solid #4A5335;
  padding: 14px 20px;
  font-size: 17px;
  line-height: 1.5;
}

#site-wrapper .pillar-list li strong {
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  color: #4A5335;
}

#site-wrapper .ev {
  border-left: 4px solid #E9A33A;
  background: #F7F5EF;
  padding: 26px 30px 28px;
  margin: 0 0 28px;
  max-width: 760px;
}

#site-wrapper .ev-date {
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #4A5335;
  margin: 0 0 6px;
}

#site-wrapper .ev h2 { margin: 0 0 6px; font-size: 26px; }
#site-wrapper .ev-where { font-weight: 600; margin: 0 0 14px; }

#site-wrapper .ev-note {
  border-top: 1px solid #DFDDD1;
  padding-top: 14px;
  margin: 16px 0 0;
  color: #4A5335;
}

/* Outlined secondary button */
#site-wrapper a.btn:not(.btn-primary):not([href*="get-involved"]) {
  background: transparent !important;
  border: 2px solid #4A5335 !important;
  color: #4A5335 !important;
}

#site-wrapper a.btn:not(.btn-primary):not([href*="get-involved"]):hover {
  background: #4A5335 !important;
  color: #FFFFFF !important;
}

/* Card links: white underlined is 8.14:1 where gold on olive is 3.78:1 */
#site-wrapper .gi .gi-card a {
  color: #FFFFFF !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#site-wrapper .gi .gi-card a:hover { color: #E9A33A !important; }


/* --- 15. Tightening and layout, 31 Aug ---------------------------- */

/* The navigation band was carrying 50px top and bottom. Half of that
   is plenty, and it pulls every page title up under the hero. */
#site-wrapper .line-menu,
#site-wrapper .line.site_line__item[style*="E9A33A"],
#site-wrapper .line.site_line__item[style*="e9a33a"] {
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}

/* Less air above the first heading on Platform, Get Involved and Donate */
#site-wrapper .line-main {
  padding-top: 26px !important;
}

body.pageid-156014 #site-wrapper .line-secondary {
  padding-top: 26px !important;
}

#site-wrapper .line-main h1:first-child,
body.pageid-156014 #site-wrapper .zone-html h1:first-child,
#site-wrapper .campaign-title {
  margin-top: 0 !important;
}

/* --- 16. Home hero portrait --------------------------------------- */
#site-wrapper .line-secondary .zone-image img {
  max-height: 600px;
}

/* --- 17. Donate page: photo left, words right, one big button ------ */

/* The raised/goal column is hidden, so give its space back. */
#site-wrapper .campaign-header > [class*="col-sm-10"] {
  display: none;
}

#site-wrapper .campaign-header > .campaign-details {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}

#site-wrapper .campaign-desc-part,
#site-wrapper .campaign-desc-part p,
#site-wrapper .campaign-desc-part li {
  font-family: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif !important;
  font-size: 18px;
  line-height: 1.6;
  color: #23261B;
}

#site-wrapper .donate-thanks {
  font-size: 20px;
  line-height: 1.55;
  color: #4A5335;
  font-weight: 600;
}

#site-wrapper .campaign-image {
  width: 100%;
  height: auto;
}

@media (min-width: 992px) {
  #site-wrapper .campaign-details {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas: "title title" "image desc" "cta cta";
    column-gap: 46px;
    align-items: start;
  }

  #site-wrapper .campaign-details > .campaign-title { grid-area: title; }
  #site-wrapper .campaign-details > .campaign-image-part { grid-area: image; }
  #site-wrapper .campaign-details > .campaign-desc-part { grid-area: desc; }
  #site-wrapper .campaign-details > .campaign-details-cta { grid-area: cta; }
}

/* One donate button, large, centred, under the photo and the words */
#site-wrapper .campaign-details-cta {
  text-align: center;
  margin-top: 38px;
  padding-top: 30px;
  border-top: 1px solid #DFDDD1;
}

#site-wrapper a.btn.campaign-make-donations {
  display: inline-block;
  float: none;
  width: auto;
  padding: 22px 70px;
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 4px;
  background-color: #E9A33A !important;
  border-color: #E9A33A !important;
  color: #23261B !important;
}

#site-wrapper a.btn.campaign-make-donations:hover {
  background-color: #C9A25A !important;
  border-color: #C9A25A !important;
}


/* --- 18. Two corrections ------------------------------------------ */

/* The outlined-button rule in section 14 was catching the donate
   button, which is .btn-default. Keep it gold. */
#site-wrapper a.btn.campaign-make-donations:not(.btn-primary),
#site-wrapper a.btn.campaign-make-donations {
  background-color: #E9A33A !important;
  border: 0 !important;
  color: #23261B !important;
}

/* Body-copy links on light grounds. Yapla's default was 3.63:1;
   Deep Olive on white measures 8.14:1. */
#site-wrapper .campaign-desc-part a,
#site-wrapper .fa-panel-content a,
#site-wrapper .pillar-list a,
#site-wrapper .gi-lead a,
#site-wrapper .ev a,
#site-wrapper .line-main .zone-html a:not(.btn),
#site-wrapper .line-secondary .zone-html a:not(.btn) {
  color: #4A5335 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#site-wrapper .campaign-desc-part a:hover,
#site-wrapper .fa-panel-content a:hover,
#site-wrapper .line-main .zone-html a:not(.btn):hover,
#site-wrapper .line-secondary .zone-html a:not(.btn):hover {
  color: #23261B !important;
}


/* --- 19. Footer social links --------------------------------------
   The footer module does not expose rel or aria-label, and the custom
   JS box needs a plan upgrade, so a small script rides along in a
   content block instead. This hides the block's empty wrapper and the
   section it would otherwise open up. */
#site-wrapper .ff-a11y {
  display: none !important;
}

#site-wrapper .line:has(> .container .ff-a11y):not(:has(h1)):not(:has(h2)):not(:has(p:not(.ff-a11y))) {
  padding: 0 !important;
}