/*
 * neve-runtime.css
 * Applies all styles that the Neve theme JavaScript would normally set at runtime.
 * This file is needed because we're serving static HTML without the Neve JS runtime.
 */

/* ============================================
   HEADER / FOOTER GRID RUNTIME BACKGROUNDS
   Neve JS normally sets background-color: var(--bgcolor) on .header--row-inner
   ============================================ */

/* Header rows - apply the --bgcolor CSS variable as actual background-color */
.header--row .header--row-inner {
  background-color: var(--bgcolor, transparent);
  color: var(--color, inherit);
}

/* Footer rows - same pattern */
.footer--row .footer--row-inner,
.footer--row-inner {
  background-color: var(--bgcolor, transparent);
  color: var(--color, inherit);
}

/* Ensure header text elements inherit white color */
.header-main .wrap a,
.header-main .nav-ul a,
.header-main .primary-menu-ul a {
  color: var(--color, inherit);
}

/* ============================================
   NAV LINK SPACING
   Neve JS applies display:flex and spacing at runtime
   ============================================ */
.nav-menu-primary .primary-menu-ul {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-menu-primary .primary-menu-ul li {
  padding: 0 var(--spacing, 20px);
}

.nav-menu-primary .primary-menu-ul .wrap {
  display: flex;
  align-items: center;
  height: var(--height, 25px);
}

/* ============================================
   CONTENT LAYOUT - Container centering
   ============================================ */
.container {
  max-width: var(--container, 1170px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* ============================================
   HEADER BUILDER ITEMS - padding and margin
   ============================================ */
.builder-item > .item--inner {
  padding: var(--padding, 0);
  margin: var(--margin, 0);
}

.hfg-slot {
  display: flex;
  align-items: center;
}

.hfg-slot.left {
  justify-content: flex-start;
}

.hfg-slot.right {
  justify-content: flex-end;
  margin-left: auto;
}

.row--wrapper {
  display: flex;
  align-items: center;
  width: 100%;
}

/* ============================================
   BUTTON STYLING
   ============================================ */
.button.button-primary {
  background-color: var(--primarybtnbg, #930000);
  color: var(--primarybtncolor, #fff);
  padding: var(--padding, 8px 12px);
  border-radius: var(--primarybtnborderradius, 3px);
  text-decoration: none;
  display: inline-block;
  border: none;
  cursor: pointer;
  font-weight: 500;
}

.button.button-primary:hover {
  background-color: var(--primarybtnhoverbg, #930000);
  color: var(--primarybtnhovercolor, #fff);
}

/* ============================================
   FOOTER STRUCTURE
   ============================================ */
.footer-top .footer--row-inner,
.footer-top-inner {
  background-color: var(--bgcolor, #ffffff);
}

.footer-main .footer--row-inner,
.footer-main-inner {
  background-color: var(--bgcolor, #930000);
  color: var(--color, #ffffff);
}

.footer-bottom .footer--row-inner,
.footer-bottom-inner {
  background-color: var(--bgcolor, #162d50);
  color: var(--color, #ffffff);
}

.footer-bottom a,
.footer-bottom .component-wrap {
  color: var(--color, #ffffff);
}

/* ============================================
   OTTER BLOCKS ADVANCED COLUMNS
   The padding/margin for Otter columns is set by ID-specific CSS
   already in the inline styles. This ensures the columns layout works.
   ============================================ */
.wp-block-themeisle-blocks-advanced-columns {
  display: flex;
  flex-wrap: wrap;
  max-width: var(--columns-width, 1140px);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

.wp-block-themeisle-blocks-advanced-column {
  box-sizing: border-box;
  position: relative;
}

.wp-block-themeisle-blocks-advanced-columns-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ============================================
   FORMIDABLE FORMS RUNTIME STYLING
   ============================================ */
.frm_form_field input[type="text"],
.frm_form_field input[type="email"],
.frm_form_field textarea,
.frm_form_field select {
  width: 100%;
  padding: var(--formfieldpadding, 10px 12px);
  border: var(--formfieldborderwidth, 2px) solid var(--formfieldbordercolor, #dddddd);
  border-radius: var(--formfieldborderradius, 3px);
  background-color: var(--formfieldbgcolor, #ffffff);
  color: var(--formfieldcolor, #272626);
  font-family: inherit;
  font-size: inherit;
  box-sizing: border-box;
}

.frm_form_field textarea {
  min-height: 120px;
  resize: vertical;
}

.frm_form_field label,
.frm_primary_label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
}

.frm_submit button,
.frm_submit input[type="submit"] {
  background-color: var(--primarybtnbg, #930000);
  color: var(--primarybtncolor, #fff);
  padding: var(--primarybtnpadding, 13px 15px);
  border-radius: var(--primarybtnborderradius, 3px);
  border: none;
  cursor: pointer;
  font-weight: 500;
  display: inline-block;
}

/* ============================================
   MOBILE HEADER
   ============================================ */
@media (max-width: 959px) {
  .hide-on-mobile,
  .hide-on-tablet {
    display: none !important;
  }
}

@media (min-width: 960px) {
  .hide-on-desktop {
    display: none !important;
  }
}

/* Ensure site logo sizing */
.site-logo img {
  max-width: var(--maxwidth, 120px);
  height: auto;
}

/* ============================================
   GENERAL FIXES
   ============================================ */
.nv-content-wrap {
  padding: 0 15px;
}

.neve-main > .container {
  padding-top: 0;
  padding-bottom: 0;
}

/* Widget area in header */
.widget-area {
  display: flex;
  align-items: center;
}

/* ============================================
   ACTION BUTTONS BAR CENTERING
   The Otter button group should center buttons
   ============================================ */
.wp-block-themeisle-blocks-button-group.align-center-desktop {
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

/* Donate buttons centering (WP core blocks) */
.wp-block-buttons.is-content-justification-center,
.wp-block-buttons.is-layout-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5em;
}

/* ============================================
   HERO BUTTON TEXT COLOR PRESERVATION
   ============================================ */
.wp-block-button__link.has-neve-link-color-background-color.has-background {
  color: #ffffff !important;
}



/* ============================================
   OTTER BLOCKS ADVANCED COLUMNS (TEAM SECTION)
   Ensure the inner text and button elements center correctly
   ============================================ */
.wp-block-themeisle-blocks-advanced-column .wp-block-themeisle-blocks-advanced-heading {
  text-align: center !important;
}

.wp-block-themeisle-blocks-advanced-column .wp-block-buttons {
  justify-content: center !important;
}

@media (max-width: 767px) {
  /* Force the columns to span the full width of the mobile viewport */
  .wp-block-themeisle-blocks-advanced-columns.is-grid {
      grid-template-columns: 1fr !important;
      display: block !important;
  }

  .wp-block-themeisle-blocks-advanced-column {
      flex-basis: 100% !important;
      max-width: 100% !important;
      width: 100% !important;
      text-align: center !important;
  }

  /* Target the button container and individual button links */
  .wp-block-themeisle-blocks-advanced-column .wp-block-button,
  .wp-block-themeisle-blocks-advanced-column .wp-block-button__link {
      margin-left: auto !important;
      margin-right: auto !important;
      display: table !important;
  }
}

/* ============================================
   FOOTER TOP - Two column layout
   The footer-top has 3 columns: contact info, spacer, form
   ============================================ */
.footer-top-inner .row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

@media (max-width: 959px) {
  .footer-top-inner .row {
    grid-template-columns: 1fr;
  }
}

/* Footer column content */
.hfg_footer .container {
  padding-top: 20px;
}

/* ============================================
   CONTACT FORM / FOOTER PRE-FOOTER LAYOUT
   ============================================ */
#wp-block-themeisle-blocks-advanced-columns-40db0924 .innerblocks-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 40px;
}

#wp-block-themeisle-blocks-advanced-columns-40db0924 .innerblocks-wrap > div {
  flex: 1 1 0% !important;
  min-width: 300px !important;
}

#wp-block-themeisle-blocks-font-awesome-icons-2b7e7997 svg {
  width: 60px !important;
  height: 60px !important;
}

.hfg_footer .container {
  max-width: var(--container, 1170px);
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   FORMIDABLE FORMS - Name fields side by side
   ============================================ */
.frm_form_field .frm_opt_container,
.frm_half {
  display: inline-block;
  width: 48%;
  margin-right: 2%;
  vertical-align: top;
}

.frm_half:last-child {
  margin-right: 0;
}

/* ============================================
   CONTENT SECTION SPACING
   More vertical padding between major sections
   ============================================ */
.nv-content-wrap > .wp-block-themeisle-blocks-advanced-columns,
.nv-content-wrap > .wp-block-columns,
.nv-content-wrap > .wp-block-group {
  margin-top: 30px;
  margin-bottom: 30px;
}

/* ============================================
   WP BLOCK COLUMNS - flex layout
   NOTE: Only apply to standard WP columns, not Otter advanced columns
   Otter blocks use their own flex-basis from inline IDs (25%, 50%, etc.)
   ============================================ */
.wp-block-columns:not(.wp-block-themeisle-blocks-advanced-columns) {
  display: flex;
  gap: 2em;
}

/* Only set flex:1 on WP core columns, not Otter columns */
.wp-block-columns:not(.wp-block-themeisle-blocks-advanced-columns) > .wp-block-column {
  flex: 1;
}

@media (max-width: 781px) {
  .wp-block-columns:not(.wp-block-themeisle-blocks-advanced-columns) {
    flex-direction: column;
  }
}

/* ============================================
   SCROLL TO TOP BUTTON
   ============================================ */
.scroll-to-top {
  display: flex;
  opacity: 1;
  visibility: visible;
}

/* ============================================
   LATEST NEWS IMAGES & GRID
   Ensure consistent image sizing for posts grid
   and enforce the 3-column "equal thirds" desktop layout
   ============================================ */
.wp-block-themeisle-blocks-posts-grid .is-grid.o-posts-grid-columns-3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 30px !important;
}

.wp-block-themeisle-blocks-posts-grid .is-grid.o-posts-grid-columns-3 > div {
  min-width: 0 !important;
}

@media (max-width: 960px) {
  .wp-block-themeisle-blocks-posts-grid .is-grid.o-posts-grid-columns-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  .wp-block-themeisle-blocks-posts-grid .is-grid.o-posts-grid-columns-3 {
    grid-template-columns: 1fr !important;
  }
}

.wp-block-themeisle-blocks-posts-grid .o-posts-grid-post-image img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  object-position: center !important;
}