/*
Theme Name: Enfold Child
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Enfold Wordpress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating will be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://www.kriesi.at
Template: enfold
*/

/* ===================================================
   FONT IMPORTS
   =================================================== */

/* @import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap'); */

@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Zilla+Slab:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Available fonts:
   font-family: "Zilla Slab", serif;
   font-family: "Fjalla One", sans-serif; */

/* ===================================================
   HOME BANNER & HERO SECTION
   =================================================== */

/* Legacy banner text classes removed - replaced with responsive heading patterns */

/* ===================================================
   GENERAL HEADINGS & TEXT
   =================================================== */

/* BBBS branded headings */
.bbbs-header {
    text-transform: uppercase;
}

/* Green accent spans within headers */
.bbbs-header span.green {
    color: #00fc87 !important; /* Brand green color */
}

/* ===================================================
   HEADER & LOGO
   =================================================== */

/* Logo container styling */
#header .logo a {
    display: flex;
    font-family: "Fjalla One", sans-serif;
    align-items: center; /* Centers the image vertically */
    height: 100%; /* Full height of container */
}

/* Logo image styling */
#header .logo a img {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 0;
    border-right: 0;
}

/* ===================================================
   LAYOUT & CONTAINERS
   =================================================== */

/* Override Enfold's default container max-width */
.container {
    max-width: 1260px !important; /* Increased from 1310px */
}

/*  fullwidth sections .bbbs-full-width */
.bbbs-full-width .container {
	padding: 0;
	margin: 0;
	width: 100vw;
    max-width: 100vw !important;
}
.bbbs-full-width .bbbs-fullwidth-image {
	background-size: cover!important;
}

/* ===================================================
   NAVIGATION
   =================================================== */

/* Special styling for placeholder links */
a[href="#"] .avia-menu-text {
    background-color: #00fc87 !important; /* Brand green background */
    color: white !important;
    border: none !important;
	padding: 9px;
    border-radius: 2px;
}

/* Main navigation link spacing */
.av-main-nav > li > a {
    padding: 0 1vw !important; /* Tighter spacing */
}
.av-main-nav > li > a > .avia-menu-text {
    font-weight: 200 !important;
	font-family: "Fjalla One", sans-serif;
	letter-spacing: 1px;
}

.current-menu-item .avia-menu-text {
    color: #00fc86 !important;
}

/* ===================================================
   ULTRA SIMPLE RESPONSIVE CSS LIBRARY
   Lightweight responsive utilities using CSS clamp()
   =================================================== */

/* Shared calculation for all fluid properties */
[data-fluid] {
  --min: 16;
  --max: 32;
  --viewport-min: 320;
  --viewport-max: 1200;
  
  /* Shared clamp calculation */
  --fluid-value: clamp(
    calc(var(--min) * 1px), 
    calc(var(--min) * 1px + (var(--max) - var(--min)) * ((100vw - var(--viewport-min) * 1px) / (var(--viewport-max) - var(--viewport-min)))), 
    calc(var(--max) * 1px)
  );
  
  /* Additional fluid calculations for different properties */
  --fluid-padding: clamp(
    calc(var(--p-min, var(--min)) * 1px), 
    calc(var(--p-min, var(--min)) * 1px + (var(--p-max, var(--max)) - var(--p-min, var(--min))) * ((100vw - var(--viewport-min) * 1px) / (var(--viewport-max) - var(--viewport-min)))), 
    calc(var(--p-max, var(--max)) * 1px)
  );
  
  --fluid-margin: clamp(
    calc(var(--m-min, var(--min)) * 1px), 
    calc(var(--m-min, var(--min)) * 1px + (var(--m-max, var(--max)) - var(--m-min, var(--min))) * ((100vw - var(--viewport-min) * 1px) / (var(--viewport-max) - var(--viewport-min)))), 
    calc(var(--m-max, var(--max)) * 1px)
  );
  
  --fluid-line-height: clamp(
    var(--lh-min, 1.2), 
    calc(var(--lh-min, 1.2) + (var(--lh-max, 1.6) - var(--lh-min, 1.2)) * ((100vw - var(--viewport-min) * 1px) / (var(--viewport-max) - var(--viewport-min)))), 
    var(--lh-max, 1.6)
  );
  
  --fluid-gap: clamp(
    calc(var(--g-min, var(--min)) * 1px), 
    calc(var(--g-min, var(--min)) * 1px + (var(--g-max, var(--max)) - var(--g-min, var(--min))) * ((100vw - var(--viewport-min) * 1px) / (var(--viewport-max) - var(--viewport-min)))), 
    calc(var(--g-max, var(--max)) * 1px)
  );
}

/* Default: font-size */
[data-fluid] {
  font-size: var(--fluid-value);
}

/* Multi-property presets */
[data-fluid="card"] {
  font-size: var(--fluid-value);
  padding: var(--fluid-padding);
  margin: var(--fluid-margin);
  line-height: var(--fluid-line-height);
  border-radius: var(--fluid-value);
}

[data-fluid="heading"] {
  font-size: var(--fluid-value);
  line-height: var(--fluid-line-height);
  margin-top: var(--fluid-margin);
  margin-bottom: var(--fluid-margin);
  letter-spacing: clamp(
    calc(var(--ls-min, -0.02) * 1em), 
    calc(var(--ls-min, -0.02) * 1em + (var(--ls-max, 0) - var(--ls-min, -0.02)) * ((100vw - var(--viewport-min) * 1px) / (var(--viewport-max) - var(--viewport-min)))), 
    calc(var(--ls-max, 0) * 1em)
  );
  font-weight: 700;
}

[data-fluid="section"] {
  padding: var(--fluid-padding);
  margin: var(--fluid-margin);
  gap: var(--fluid-gap);
}

[data-fluid="button"] {
  font-size: var(--fluid-value);
  padding: var(--fluid-padding);
  border-radius: var(--fluid-value);
  line-height: var(--fluid-line-height);
}

[data-fluid="container"] {
  padding: var(--fluid-padding);
  margin: var(--fluid-margin);
  gap: var(--fluid-gap);
  max-width: clamp(
    calc(var(--w-min, 320) * 1px), 
    calc(var(--w-min, 320) * 1px + (var(--w-max, 1200) - var(--w-min, 320)) * ((100vw - var(--viewport-min) * 1px) / (var(--viewport-max) - var(--viewport-min)))), 
    calc(var(--w-max, 1200) * 1px)
  );
}

/* Spacing - all sides */
[data-fluid="padding"] {
  padding: var(--fluid-value);
  font-size: inherit;
}

[data-fluid="margin"] {
  margin: var(--fluid-value);
  font-size: inherit;
}

/* Individual padding sides */
[data-fluid="padding-top"] {
  padding-top: var(--fluid-value);
  font-size: inherit;
}

[data-fluid="padding-right"] {
  padding-right: var(--fluid-value);
  font-size: inherit;
}

[data-fluid="padding-bottom"] {
  padding-bottom: var(--fluid-value);
  font-size: inherit;
}

[data-fluid="padding-left"] {
  padding-left: var(--fluid-value);
  font-size: inherit;
}

/* Individual margin sides */
[data-fluid="margin-top"] {
  margin-top: var(--fluid-value);
  font-size: inherit;
}

[data-fluid="margin-right"] {
  margin-right: var(--fluid-value);
  font-size: inherit;
}

[data-fluid="margin-bottom"] {
  margin-bottom: var(--fluid-value);
  font-size: inherit;
}

[data-fluid="margin-left"] {
  margin-left: var(--fluid-value);
  font-size: inherit;
}

/* Other useful properties */
[data-fluid="gap"] {
  gap: var(--fluid-value);
  font-size: inherit;
}

[data-fluid="width"] {
  width: var(--fluid-value);
  font-size: inherit;
}

[data-fluid="height"] {
  height: var(--fluid-value);
  font-size: inherit;
}

[data-fluid="border-radius"] {
  border-radius: var(--fluid-value);
  font-size: inherit;
}

/* Shorthand combinations */
[data-fluid="padding-x"] {
  padding-left: var(--fluid-value);
  padding-right: var(--fluid-value);
  font-size: inherit;
}

[data-fluid="padding-y"] {
  padding-top: var(--fluid-value);
  padding-bottom: var(--fluid-value);
  font-size: inherit;
}

[data-fluid="margin-x"] {
  margin-left: var(--fluid-value);
  margin-right: var(--fluid-value);
  font-size: inherit;
}

[data-fluid="margin-y"] {
  margin-top: var(--fluid-value);
  margin-bottom: var(--fluid-value);
  font-size: inherit;
}


/* ===================================================
   RESPONSIVE HEADING PATTERNS
   Custom heading styles for multi-line responsive headings
   =================================================== */

/* Hero Section - Two-tone heading with left alignment and responsive indent */
.hero-heading-left {
    text-align: left;
    font-family: "Fjalla One", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    margin-bottom: 2rem;
    line-height: 1.1;
    /* Responsive top margin to push heading down */
    margin-top: clamp(17rem, 17rem + 8rem * ((100vw - 320px) / (1200 - 320)), 25rem);
}

/* SEO-friendly heading tags with custom styling */
.hero-heading-left h1 {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-weight: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    line-height: 1.1;
    color: #ffffff;
    margin-bottom: 0.25rem;
}

.hero-heading-left h1.line-2,
.hero-heading-left h1[class*="line-2"] {
    color: #00fc87 !important; /* Brand green */
    /* Responsive indent - grows from 20% to 30% based on screen size */
    margin-left: clamp(20%, 20% + 10% * ((100vw - 320px) / (1200 - 320)), 30%) !important;
    margin-bottom: 1.5rem !important;
    text-align: left !important;
    display: block !important;
}

.hero-heading-left h2 {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-weight: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    line-height: 1.2;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 0;
}

/* Legacy span support for backwards compatibility */
.hero-heading-left .line-1 {
    display: block;
    color: #ffffff;
    margin-bottom: 0.25rem;
    line-height: 1.1;
}

.hero-heading-left .line-2 {
    display: block;
    color: #00fc87; /* Brand green */
    /* Responsive indent - grows from 16% to 25% based on screen size */
    margin-left: clamp(16%, 16% + 9% * ((100vw - 320px) / (1200 - 320)), 25%);
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.hero-heading-left .line-3 {
    display: block;
    color: #ffffff;
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
    line-height: 1.2;
}

/* Content Section - Two-tone heading with center alignment */
.content-heading-center {
    text-align: center;
    font-family: "Fjalla One", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #2c3e50;
    margin-bottom: 2rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.content-heading-center h2 {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-weight: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.content-heading-center h2.line-2 {
    color: #00fc87 !important; /* Brand green */
    font-weight: 400;
    margin-bottom: 0;
}

/* Legacy span support */
.content-heading-center .line-1 {
    display: block;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.content-heading-center .line-2 {
    display: block;
    color: #00fc87; /* Brand green */
    font-weight: 400;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .hero-heading-left {
        /* Smaller top margin on mobile */
        margin-top: clamp(12rem, 12rem + 5rem * ((100vw - 320px) / (768 - 320)), 17rem) !important;
    }
    
    .hero-heading-left h1 {
        margin-bottom: 0.2rem;
    }
    
    .hero-heading-left h1.line-2 {
        margin-bottom: 1rem !important;
        margin-left: clamp(15%, 15% + 8% * ((100vw - 320px) / (768 - 320)), 23%) !important;
    }
    
    .hero-heading-left h2 {
        margin-top: 0;
        margin-bottom: 0;
    }
    
    /* Legacy span support */
    .hero-heading-left .line-1 {
        margin-bottom: 0.2rem;
    }
    
    .hero-heading-left .line-2 {
        margin-bottom: 1rem;
        margin-left: clamp(12%, 12% + 6% * ((100vw - 320px) / (768 - 320)), 18%);
    }
    
    .hero-heading-left .line-3 {
        margin-top: 0;
        margin-bottom: 0;
    }
    
    .content-heading-center .line-1,
    .content-heading-center .line-2 {
        margin-bottom: 0.25rem;
    }
}

/* Tablet responsive adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-heading-left {
        /* Medium top margin on tablets */
        margin-top: clamp(17rem, 17rem + 6rem * ((100vw - 768px) / (1024 - 768)), 23rem) !important;
    }
    
    .hero-heading-left h1.line-2 {
        /* Slightly less indent on tablets */
        margin-left: clamp(18%, 18% + 9% * ((100vw - 768px) / (1024 - 768)), 27%) !important;
        margin-bottom: 1.25rem !important;
    }
    
    /* Legacy span support */
    .hero-heading-left .line-2 {
        /* Slightly less indent on tablets */
        margin-left: clamp(14%, 14% + 7% * ((100vw - 768px) / (1024 - 768)), 21%);
        margin-bottom: 1.25rem;
    }
}


/* ===================================================
   ANIMATED NUMBERS STYLING
   Large statistics with brand colors
   =================================================== */

/* Main animated number container */
.avia-animated-number .avia-animated-number-title {
    font-family: "Fjalla One", sans-serif !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* The actual number (85, 70, 64) - make it big and green */
.avia-animated-number .avia-single-number {
    font-size: clamp(25px, 25px + 25 * (100vw - 320px) / 880, 50px) !important;
    color: #00fc87 !important; /* Brand green */
    font-family: "Fjalla One", sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
}

/* The percentage symbol (%) - keep it gray */
.avia-animated-number .avia-no-number {
/*     font-size: clamp(25px, 25px + 25 * (100vw - 320px) / 880, 50px) !important; */
    color: #666666 !important; /* Gray color for % symbol */
    font-family: "Fjalla One", sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
}

/* Description text below the numbers */
.avia-animated-number .avia-animated-number-content p {
    font-size: clamp(14px, 14px + 4px * ((100vw - 320px) / (1200 - 320)), 18px) !important;
    color: #555555 !important;
    margin-top: 0.5rem !important;
    line-height: 1.4 !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .avia-animated-number .avia-single-number,
    .avia-animated-number .avia-no-number {
        font-size: clamp(36px, 36px + 12px * ((100vw - 320px) / (768 - 320)), 48px) !important;
    }
    
    .avia-animated-number .avia-animated-number-content p {
        font-size: clamp(12px, 12px + 4px * ((100vw - 320px) / (768 - 320)), 16px) !important;
    }
}

/* ===================================================
   ADDITIONAL CUSTOM STYLES
   Add your own additional styles here:
   =================================================== */
#main { 
	background: white;
}

.tab-section-bbbs .av-tab-section-tab-title-container a:nth-child(1) .av-inner-tab-title {
	width: 110px;
}
.tab-section-bbbs .av-tab-section-tab-title-container a:nth-child(2) .av-inner-tab-title {
	width: 145px;
}
.tab-section-bbbs .av-tab-section-tab-title-container a:nth-child(3) .av-inner-tab-title {
	width: 135px;
}
.tab-section-bbbs .av-tab-section-tab-title-container a:nth-child(4) .av-inner-tab-title {
	width: 115px;
}
.tab-section-bbbs .av-tab-section-tab-title-container a:nth-child(5) .av-inner-tab-title {
	width: 73px;
}

.tab-section-donate-bbbs .av-tab-section-tab-title-container a .av-inner-tab-title {
	width: 110px!important;
}


.tab-section-bbbs .av-tab-section-image {
	margin: auto;
    border: 20px solid transparent;
    border-bottom: 10px;
    border-top: 0;
    opacity: 0.6;
    background-position: bottom;
    height: 50px;
}

.tab-section-bbbs .av-outer-tab-title {
	display: flex!important;
    align-items: center!important;
    justify-content: center!important;
}
.tab-section-bbbs .av-inner-tab-title {
	font-size: 14px!important;
	display: flex!important;
    align-items: center!important;
	justify-content: center;
	height: 5em !important;
}
.tab-section-bbbs .av-tab-arrow-container {
    width: 100%!important;
	top: 10px!important;
}

.tab-section-bbbs .content-heading-center {
	margin-bottom: 0px;
}
.av-active-tab-title.av-section-tab-title {
    color: #00fc86!important;
}
.av-tab-arrow-container span {
    background-color: #00fc86!important;
}
.av-active-tab-content .av_inherit_color a {
	color:	#00fc86!important;
}
/* Leadership on About page */
.bbbs-leadership .team-member-name {
	color: #231f20;
	font-weight: 400;
    font-size: larger;
}
.bbbs-leadership .team-member-job-title {
	color: #222222;
    font-size: medium;
}


/* Add any additional custom styles below this line */
.avia_iconbox_title {
    font-family: 'Fjalla One';
}

.bbbs-news-slider .jds-slide-body {
	overflow: hidden;
}
.bbbs-news-slider .jds-slide-title {
	color: white!important;
	padding-right: 3vw;
}
@media (max-width: 640px) {
	.bbbs-news-slider .jds-slide-title {
		padding: 0 14vw;
		
	}
	.bbbs-news-slider .jds-slide-text {
		padding: 0 14vw;
		padding-top: 5vw;
		text-align: center;
	}
}
.bbbs-news-slider .jds-slide-text {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	color: #4d4d4d!important;
}
/* Hide Newsletter Form - ctct-disclosure */
.ctct-form-wrapper .ctct-disclosure {
	display: none;
}
.bbbs-newsletter-form .ctct-form-field-submit input {
	width:100%;
	height: 40px;
}
#top .bbbs-newsletter-form input[type=email] {
	margin-bottom: 7px;
}
.bbbs-newsletter-form {
	max-width: 300px;
    margin: 0 auto;
}