/* ==========================================================================
   Bridgeway Connections — Brand Kit application layer
   Loaded after the Salient theme cascade on every page (see app/raw.js).
   Source of truth: the site's Brand Kit (Studio → Brand Kit tab).
   Snapshots and mirrored theme files are never edited; this file only
   standardises what the kit defines on top of them.
   ========================================================================== */

:root {
  /* Palette */
  --bw-rust: #bd7256;        /* primary */
  --bw-sage: #759382;        /* secondary */
  --bw-rose: #d3a4b0;        /* accent */
  --bw-ochre: #c39869;       /* accent / hover */
  --bw-cream: #f5f3f0;       /* background */
  --bw-white: #ffffff;       /* surface */
  --bw-charcoal: #222121;    /* text */
  --bw-slate: #878787;       /* muted */
  --bw-border: #eeeeee;      /* border */
  --bw-dark: #2d2d2d;        /* dark surface */
  --bw-mint: #a7c1aa;        /* decorative */

  /* Type */
  --bw-font-heading: "mandau", sans-serif;
  --bw-font-body: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Shape & motion */
  --bw-radius: 10px;
  --bw-border-width: 2px;
  --bw-shadow-hover: 0 20px 38px rgba(0, 0, 0, 0.16);
  --bw-shadow-header: 0 3px 45px rgba(0, 0, 0, 0.15);
  --bw-ease: cubic-bezier(0.25, 1, 0.33, 1);
  --bw-duration: 450ms;
}

/* --------------------------------------------------------------------------
   Base text & links
   -------------------------------------------------------------------------- */
body {
  color: var(--bw-charcoal);
}

body .container-wrap a:not(.nectar-button):not(.box-link):not(.link_text):not(.gform_button) {
  text-decoration-color: var(--bw-ochre);
  transition: color var(--bw-duration) var(--bw-ease);
}

body .container-wrap a:not(.nectar-button):not(.box-link):not(.link_text):not(.gform_button):hover {
  color: var(--bw-ochre);
}

/* Muted helper copy (post meta, captions, small notes) */
.post .post-meta,
.post .post-meta a,
.wp-caption-text,
.gfield_description,
.gform_wrapper .gfield_required_text {
  color: var(--bw-slate);
}

/* --------------------------------------------------------------------------
   Buttons (Salient nectar-button + Gravity Forms submit)
   Primary: rust background, cream/white text, 10px radius, 2px border,
   Montserrat 600, lift + shadow on hover.
   -------------------------------------------------------------------------- */
body .nectar-button,
body .gform_wrapper .gform_button,
body .gform_wrapper input[type="submit"],
body .gform_wrapper button[type="submit"] {
  font-family: var(--bw-font-body);
  font-weight: 600;
  border-radius: var(--bw-radius) !important;
  border: var(--bw-border-width) solid transparent;
  box-shadow: none;
  transition:
    transform var(--bw-duration) var(--bw-ease),
    box-shadow var(--bw-duration) var(--bw-ease),
    background-color var(--bw-duration) var(--bw-ease),
    color var(--bw-duration) var(--bw-ease),
    border-color var(--bw-duration) var(--bw-ease);
}

body .nectar-button.regular-button,
body .nectar-button.regular-button.accent-color,
body .gform_wrapper .gform_button,
body .gform_wrapper input[type="submit"],
body .gform_wrapper button[type="submit"] {
  background-color: var(--bw-rust) !important;
  border-color: var(--bw-rust);
  color: var(--bw-cream) !important;
}

/* Secondary buttons that sit on rust rows: cream fill, rust text. */
body .nectar-button.regular-button.extra-color-3,
body .nectar-fancy-box .nectar-button.regular-button {
  background-color: var(--bw-cream) !important;
  border-color: var(--bw-cream);
  color: var(--bw-rust) !important;
}

body .nectar-button:hover,
body .nectar-button:focus-visible,
body .gform_wrapper .gform_button:hover,
body .gform_wrapper .gform_button:focus-visible,
body .gform_wrapper input[type="submit"]:hover,
body .gform_wrapper button[type="submit"]:hover {
  transform: translateY(-3px);
  box-shadow: var(--bw-shadow-hover);
}

body .nectar-button:focus-visible,
body .gform_wrapper .gform_button:focus-visible {
  outline: var(--bw-border-width) solid var(--bw-ochre);
  outline-offset: 2px;
}

/* Text/underline CTAs (footer "Transparency", inline CTAs) */
body .nectar-cta[data-style="underline"] .link_text {
  font-family: var(--bw-font-body);
  font-weight: 600;
  transition: color var(--bw-duration) var(--bw-ease);
}

body .nectar-cta[data-style="underline"] .link_text:hover {
  color: var(--bw-ochre);
}

/* --------------------------------------------------------------------------
   Cards (Salient fancy boxes)
   10px radius, ochre hover overlay, smooth zoom, hover lift.
   -------------------------------------------------------------------------- */
body .nectar-fancy-box {
  border-radius: var(--bw-radius) !important;
  overflow: hidden;
  transition:
    transform var(--bw-duration) var(--bw-ease),
    box-shadow var(--bw-duration) var(--bw-ease);
}

body .nectar-fancy-box,
body .nectar-fancy-box .box-bg,
body .nectar-fancy-box .box-inner-wrap {
  border-radius: var(--bw-radius) !important;
}

body .nectar-fancy-box:hover {
  box-shadow: var(--bw-shadow-hover);
}

/* Unify the hover-description gradient on the brand's ochre. */
body .nectar-fancy-box[data-style="hover_desc"][data-color].hover_color_a7c1aa .box-bg:after,
body .nectar-fancy-box[data-style="hover_desc"][data-color].hover_color_c39869 .box-bg:after {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bw-ochre) 100%);
}

/* Images inside rounded containers */
body .img-with-aniamtion-wrap img,
body .wpb_single_image img,
body .post .post-featured-img img {
  border-radius: var(--bw-radius);
}

/* --------------------------------------------------------------------------
   Forms (Gravity Forms + native forwarded forms)
   14px inputs, 10px radius, 2px rust focus border, clear validation.
   -------------------------------------------------------------------------- */
body .gform_wrapper input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
body .gform_wrapper textarea,
body .gform_wrapper select {
  font-family: var(--bw-font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--bw-charcoal);
  background-color: var(--bw-white);
  border: var(--bw-border-width) solid var(--bw-border);
  border-radius: var(--bw-radius);
  transition:
    border-color var(--bw-duration) var(--bw-ease),
    box-shadow var(--bw-duration) var(--bw-ease);
}

body .gform_wrapper input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):focus,
body .gform_wrapper textarea:focus,
body .gform_wrapper select:focus {
  outline: none;
  border-color: var(--bw-rust);
  box-shadow: 0 0 0 3px rgba(189, 114, 86, 0.15);
}

body .gform_wrapper .gfield_label,
body .gform_wrapper legend.gfield_label {
  font-family: var(--bw-font-body);
  font-weight: 600;
  color: var(--bw-charcoal);
}

/* Validation: keep the message readable and on-brand (no harsh red blocks). */
body .gform_wrapper .gfield_error input,
body .gform_wrapper .gfield_error textarea,
body .gform_wrapper .gfield_error select {
  border-color: var(--bw-rust);
}

body .gform_wrapper .gfield_validation_message,
body .gform_wrapper .validation_message,
body .gform_wrapper .gform_validation_errors {
  font-family: var(--bw-font-body);
  font-size: 14px;
  color: var(--bw-rust);
  background: transparent;
  border: none;
  box-shadow: none;
  padding-left: 0;
}

body .gform_wrapper .gform_confirmation_message {
  font-family: var(--bw-font-body);
  color: var(--bw-charcoal);
  background: var(--bw-cream);
  border: var(--bw-border-width) solid var(--bw-sage);
  border-radius: var(--bw-radius);
  padding: 20px 24px;
}

/* --------------------------------------------------------------------------
   Navigation & header
   Cream header, Montserrat 600 links, rust active state, ochre hover.
   -------------------------------------------------------------------------- */
body #header-outer {
  background-color: var(--bw-cream);
}

body #header-outer nav > ul > li > a,
body #slide-out-widget-area ul li a {
  font-family: var(--bw-font-body);
  font-weight: 600;
  transition: color var(--bw-duration) var(--bw-ease);
}

body #header-outer nav > ul > li > a:hover,
body #header-outer nav > ul > li.sfHover > a,
body #slide-out-widget-area ul li a:hover {
  color: var(--bw-ochre) !important;
}

body #header-outer nav > ul > li.current-menu-item > a,
body #header-outer nav > ul > li.current_page_item > a,
body #header-outer nav > ul > li.current-menu-ancestor > a,
body #slide-out-widget-area ul li.current-menu-item > a {
  color: var(--bw-rust) !important;
}

/* Header CTA button ("Make a Donation" menu item, Salient button_solid_color):
   one line, rust fill, cream text, 10px radius, standard lift on hover. */
body #header-outer nav > ul > li.button_solid_color > a,
body #header-outer nav > ul > li.button_bordered > a {
  display: inline-flex !important;
  align-items: center;
  white-space: nowrap;
  padding: 10px 22px !important;
  line-height: 1.2 !important;
  font-size: 18px !important;
  border-radius: var(--bw-radius) !important;
  background-color: var(--bw-rust) !important;
  color: var(--bw-cream) !important;
  border: 2px solid var(--bw-rust) !important;
  transition:
    transform var(--bw-duration) var(--bw-ease),
    box-shadow var(--bw-duration) var(--bw-ease),
    background-color var(--bw-duration) var(--bw-ease);
}

body #header-outer nav > ul > li.button_solid_color > a .menu-title-text,
body #header-outer nav > ul > li.button_bordered > a .menu-title-text {
  color: var(--bw-cream) !important;
  white-space: nowrap;
}

body #header-outer nav > ul > li.button_solid_color > a:hover,
body #header-outer nav > ul > li.button_solid_color.sfHover > a,
body #header-outer nav > ul > li.button_bordered > a:hover {
  color: var(--bw-cream) !important;
  background-color: var(--bw-ochre) !important;
  border-color: var(--bw-ochre) !important;
  transform: translateY(-3px);
  box-shadow: 0 20px 38px rgba(0, 0, 0, 0.16);
}

body #header-outer nav > ul > li.button_solid_color > a:hover .menu-title-text {
  color: var(--bw-cream) !important;
}

/* Dropdowns: white surface, 1px border-gray dividers, 10px radius */
body #header-outer nav > ul > li > ul.sub-menu {
  border-radius: var(--bw-radius);
  border: 1px solid var(--bw-border);
  overflow: hidden;
}

body #header-outer nav > ul > li > ul.sub-menu li + li {
  border-top: 1px solid var(--bw-border);
}

/* Slide-out (mobile) menu */
body #slide-out-widget-area,
body #slide-out-widget-area.slide-out-from-right {
  background-color: var(--bw-cream);
}

/* --------------------------------------------------------------------------
   Footer bottom bar & back-to-top
   -------------------------------------------------------------------------- */
body #footer-outer #copyright,
body #footer-outer #copyright p,
body #footer-outer #copyright a {
  font-family: var(--bw-font-body);
  color: var(--bw-cream);
}

body #footer-outer #copyright {
  background-color: var(--bw-rust);
}

body #to-top {
  background-color: var(--bw-rust) !important;
  border-radius: 200px !important;
  transition:
    background-color var(--bw-duration) var(--bw-ease),
    transform var(--bw-duration) var(--bw-ease);
}

body #to-top:hover {
  background-color: var(--bw-ochre) !important;
}

/* --------------------------------------------------------------------------
   Blog templates (dynamic archive/post pages share the same rules)
   -------------------------------------------------------------------------- */
body .post .post-header h1,
body .post .post-header h2,
body .page-header-no-bg h1 {
  font-family: var(--bw-font-heading);
  font-weight: 400;
}

body .post .post-header .meta-author,
body .post .post-header .meta-date,
body .post .post-header .meta-category a {
  font-family: var(--bw-font-body);
  color: var(--bw-slate);
}

body .post .post-header .meta-category a:hover {
  color: var(--bw-ochre);
}

/* Neutralise legacy Gutenberg preset colours that are not in the palette. */
body .has-vivid-purple-color,
body .has-vivid-cyan-blue-color,
body .has-luminous-vivid-orange-color,
body .has-vivid-red-color,
body .has-vivid-green-cyan-color {
  color: var(--bw-charcoal) !important;
}

body .has-vivid-purple-background-color,
body .has-vivid-cyan-blue-background-color,
body .has-luminous-vivid-orange-background-color,
body .has-vivid-red-background-color,
body .has-vivid-green-cyan-background-color {
  background-color: var(--bw-cream) !important;
}

/* --------------------------------------------------------------------------
   Responsive safety net — every screen size
   -------------------------------------------------------------------------- */

/* Nothing may push the page wider than the screen. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body #ajax-content-wrap,
body #header-outer,
body #footer-outer {
  max-width: 100vw;
  overflow-x: clip;
}

/* Media always fits its container. */
body img,
body video,
body svg,
body iframe,
body embed,
body object {
  max-width: 100%;
}

body img,
body video {
  height: auto;
}

/* Embedded video keeps a 16:9 shape and shrinks with the screen. */
body .wpb_video_wrapper,
body .wpb_video_widget .wpb_wrapper,
body .nectar-video-wrap,
body .video-embed {
  position: relative;
  width: 100%;
}

body .wpb_video_wrapper iframe,
body .wpb_video_widget .wpb_wrapper iframe,
body .video-embed iframe {
  width: 100% !important;
  aspect-ratio: 16 / 9;
  height: auto !important;
}

/* Wide tables scroll inside themselves instead of breaking the layout. */
body .wpb_text_column table,
body .entry-content table,
body .wp-block-table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Long words, links and emails wrap instead of overflowing. */
body p,
body li,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .nectar-cta,
body .gform_wrapper .gfield_label,
body #footer-outer a {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Service cards: the description is hidden until hover on desktop.
   Touch screens have no hover, so show it permanently there. */
@media (hover: none), (pointer: coarse) {
  body .nectar-fancy-box[data-style="hover_desc"] .inner .hover-content,
  body .nectar-fancy-box[data-style="hover_desc"] .hover-content {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    max-height: none !important;
    margin-top: 10px;
  }

  body .nectar-fancy-box[data-style="hover_desc"] .inner,
  body .nectar-fancy-box[data-style="hover_desc"] .heading-wrap {
    transform: none !important;
  }

  body .nectar-fancy-box[data-style="hover_desc"] .box-bg:after {
    opacity: 1 !important;
  }

  /* Hover lifts make no sense on touch. */
  body .nectar-button:hover,
  body .gform_wrapper .gform_button:hover,
  body .nectar-fancy-box:hover {
    transform: none;
  }
}

/* Tablets and below */
@media only screen and (max-width: 1000px) {
  body .container,
  body .container-wrap .row.vc_row-fluid.full-width-content {
    padding-left: 28px;
    padding-right: 28px;
  }

  body .nectar-fancy-box[style*="min-height"] {
    min-height: 420px !important;
  }
}

/* Phones */
@media only screen and (max-width: 690px) {
  body .container,
  body .container-wrap .row.vc_row-fluid.full-width-content {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Heading ramp from the Brand Kit's mobile sizes. */
  body h1 { font-size: 39px !important; line-height: 42px !important; }
  body h2 { font-size: 39px !important; line-height: 43px !important; }
  body h3 { font-size: 32px !important; line-height: 37px !important; }
  body h4 { font-size: 29px !important; line-height: 36px !important; }

  body .nectar-fancy-box[style*="min-height"] {
    min-height: 380px !important;
  }

  body .nectar-fancy-box .inner {
    padding: 24px 20px !important;
  }

  /* Buttons: comfortable tap targets, never wider than the screen. */
  body .nectar-button,
  body .gform_wrapper .gform_button {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    min-height: 48px;
    line-height: 1.3;
  }

  body .nectar-button.large,
  body .nectar-button.extra_jumbo,
  body .nectar-button.jumbo {
    font-size: 15px;
    padding: 14px 24px;
  }

  /* Buttons that sit beside cards: stack them with the card's margin. */
  body .nectar-fancy-box + .nectar-button.regular-button {
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: inline-block;
  }

  /* Forms: one column, full-width fields, big enough to tap and type. */
  body .gform_wrapper .gform_fields {
    grid-column-gap: 0;
  }

  body .gform_wrapper .gfield,
  body .gform_wrapper .ginput_complex span,
  body .gform_wrapper .ginput_complex .ginput_full,
  body .gform_wrapper .ginput_complex .ginput_left,
  body .gform_wrapper .ginput_complex .ginput_right {
    width: 100% !important;
    grid-column: 1 / -1 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body .gform_wrapper .ginput_complex .ginput_left,
  body .gform_wrapper .ginput_complex .ginput_right {
    margin-bottom: 12px;
  }

  body .gform_wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
  body .gform_wrapper select,
  body .gform_wrapper textarea {
    width: 100% !important;
    font-size: 16px !important; /* stops iOS from zooming in on focus */
    min-height: 48px;
  }

  body .gform_wrapper .gform_button {
    width: 100%;
  }

  body .gform_wrapper .gfield_checkbox label,
  body .gform_wrapper .gfield_radio label {
    min-height: 32px;
    line-height: 32px;
  }

  /* Footer: stack columns, centre text, keep contact links tappable. */
  body #footer-outer .row > div,
  body #footer-outer .widget {
    width: 100% !important;
    margin-bottom: 24px;
    text-align: center;
  }

  body #footer-outer a {
    display: inline-block;
    padding: 6px 0;
  }

  body #footer-outer #copyright .col {
    width: 100%;
    text-align: center;
  }

  body #footer-outer #copyright .col ul {
    float: none;
    text-align: center;
    margin-top: 10px;
  }

  body #footer-outer #copyright .col ul li {
    float: none;
    display: inline-block;
    margin: 0 8px;
  }

  /* Header: logo never crowds the menu button. */
  body #header-outer #logo img {
    max-height: 44px;
    width: auto;
  }

  /* Cookie notice fits the screen. */
  body .moove-gdpr-info-bar-container,
  body #moove_gdpr_cookie_info_bar {
    max-width: 100vw;
  }

  body #moove_gdpr_cookie_info_bar .moove-gdpr-button-holder button {
    margin: 6px 4px;
  }

  /* Back-to-top button stays clear of the thumb and the cookie bar. */
  body #to-top {
    right: 14px;
    bottom: 14px;
  }

  /* Testimonial / quote sections on phones. */
  body .testimonial_slider blockquote,
  body .nectar-quote {
    font-size: 18px;
    line-height: 28px;
  }
}

/* Very small phones */
@media only screen and (max-width: 380px) {
  body h1 { font-size: 34px !important; line-height: 38px !important; }
  body h2 { font-size: 32px !important; line-height: 37px !important; }
  body h3 { font-size: 28px !important; line-height: 33px !important; }

  body .nectar-button {
    width: 100%;
  }

  body .nectar-fancy-box[style*="min-height"] {
    min-height: 340px !important;
  }
}

/* Large desktops: keep line lengths readable and the layout centred. */
@media only screen and (min-width: 1600px) {
  body .container-wrap .container,
  body .container {
    max-width: 1300px;
  }

  body .full-width-content .wpb_text_column {
    max-width: 1504px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --------------------------------------------------------------------------
   Motion: respect users who prefer less movement.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body .nectar-button,
  body .nectar-fancy-box,
  body #to-top {
    transition: none;
  }

  body .nectar-button:hover,
  body .gform_wrapper .gform_button:hover {
    transform: none;
  }
}