/**
Theme Name: BerkshireCoventry
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: berkshirecoventry
Template: astra
*/

/* 🌐 Global CSS variables */
:root {
  --tab-bg-color: #fafafa; /* Light neutral background */
}

/* 📦 Normalize box sizing across browsers */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 🧱 Tab container layout */
#uagb-tabs__tab0,
#uagb-tabs__tab1,
#uagb-tabs__tab2 {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* More predictable than space-between */
  flex-wrap: nowrap;
  padding: 16px 20px;
  gap: 12px;
  line-height: 1.5;
  background-color: var(--tab-bg-color);
  transition: background-color 0.3s ease;
}

/* 🖼️ Icon injection via ::before */
#uagb-tabs__tab0::before {
  content: url('https://berkshirecoventryhoa.org/website_4bc9a88c/wp-content/uploads/2025/09/icons8-neighborhood-48.png');
}
#uagb-tabs__tab1::before {
  content: url('https://berkshirecoventryhoa.org/website_4bc9a88c/wp-content/uploads/2025/09/icons8-government-48.png');
}
#uagb-tabs__tab2::before {
  content: url('https://berkshirecoventryhoa.org/website_4bc9a88c/wp-content/uploads/2025/09/icons8-megaphone-48.png');
}

/* 🧭 Icon styling for cross-browser consistency */
#uagb-tabs__tab0::before,
#uagb-tabs__tab1::before,
#uagb-tabs__tab2::before {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  vertical-align: middle;
  object-fit: contain;
  flex-shrink: 0; /* Prevent resizing in flex container */
}

/* 📝 Text block alignment */
.uagb-tabs__title-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.4;
  flex: 1 1 auto;
  max-width: 100%;
  min-width: 0; /* Prevent overflow in Firefox */
}

/* ➡️ Chevron alignment */
.uagb-tabs__icon {
  margin-left: auto;
  align-self: center;
  min-width: 0;
  flex-shrink: 1;
}

/* 🔤 Typography tweaks */
.uagb-tabs__title-text h4 {
  margin: 2px 0;
}
.uagb-tabs__title-text strong {
  font-size: 1rem;
}

/* 🎨 Hover highlights */
#uagb-tabs__tab0:hover {
  background-color: #e0f2fe; /* Soft blue */
}
#uagb-tabs__tab1:hover {
  background-color: #dcfce7; /* Soft green */
}
#uagb-tabs__tab2:hover {
  background-color: #fef9c3; /* Soft yellow */
}

/* 🧊 Info box styling */
.wp-block-uagb-info-box {
  background-color: #f9f9f9;
  transition: background-color 0.3s ease;
  padding: 16px;
  border-radius: 6px;
}
.wp-block-uagb-info-box:hover {
  background-color: #e0f2fe;
}

/* 🦊 Firefox-specific layout patch */
@-moz-document url-prefix() {
  #uagb-tabs__tab0,
  #uagb-tabs__tab1,
  #uagb-tabs__tab2 {
    justify-content: flex-start !important;
    gap: 12px !important;
  }

  .uagb-tabs__icon {
    margin-left: auto !important;
  }
}

/* === Flipbox Image Styling for Our Story/About Page === */
.our-story-page .happy-addon-flip-box .happy-addon-flip-box-front img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.our-story-page .happy-addon-flip-box .happy-addon-flip-box-front {
    height: 300px;
    overflow: hidden;
}

/* Override EventON all-caps styling */
.evcal_event_title,
.evcal_event_subtitle,
.evo_eventcard .evcal_event_title,
.evo_eventcard .evcal_event_subtitle,
.evo_fc_day .evcal_event_title,
.evo_fc_day .evcal_event_subtitle,
.evo_tile .evcal_event_title,
.evo_tile .evcal_event_subtitle {
  text-transform: none !important;
}

/* ============================================================
   Homepage Seasonal Slider (with reminders)
   WordPress style.css
   Rotates child slides right-to-left every 10s
   ============================================================ */

.seasonal-slider {
  position: relative;
  width: 100%;
  min-height: 400px;
  overflow: hidden;
}

/* Shared slide styling */
.seasonal-slider .slide1,
.seasonal-slider .slide2,
.seasonal-slider .slide3 {
  position: absolute;
  inset: 0;
  transform: translateX(100%); /* start off to the right */
  animation: slideCycle 30s infinite linear;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
  padding: 20px;
}

/* Stagger animation start times */
.seasonal-slider .slide1 { animation-delay: 0s; }
.seasonal-slider .slide2 { animation-delay: 10s; }
.seasonal-slider .slide3 { animation-delay: 20s; }

/* Keyframes: slide in, hold, slide out */
@keyframes slideCycle {
  0%   { transform: translateX(100%); }
  5%   { transform: translateX(0); }       /* slide in */
  30%  { transform: translateX(0); }       /* hold */
  35%  { transform: translateX(-100%); }   /* slide out */
  100% { transform: translateX(-100%); }
}

/* Responsive refinements */
@media (max-width: 1024px) {
  .seasonal-slider { min-height: 300px; }
  .seasonal-slider .slide1 h2,
  .seasonal-slider .slide2 h2,
  .seasonal-slider .slide3 h2 { font-size: 24px; }
  .seasonal-slider .slide1 p,
  .seasonal-slider .slide2 p,
  .seasonal-slider .slide3 p { font-size: 16px; }
}

@media (max-width: 600px) {
  .seasonal-slider { min-height: 240px; }
  .seasonal-slider .slide1 h2,
  .seasonal-slider .slide2 h2,
  .seasonal-slider .slide3 h2 { font-size: 20px; }
  .seasonal-slider .slide1 p,
  .seasonal-slider .slide2 p,
  .seasonal-slider .slide3 p { font-size: 14px; }
}

/* === Modular Responsive Icon Styling ===
   Purpose: Ensure menu icons injected via ::before scale properly across devices,
   remain visually consistent, and don’t break accessibility or layout.
*/

/* Base icon styling (desktop default) */
#uagb-tabs__tab0::before,
#uagb-tabs__tab1::before,
#uagb-tabs__tab2::before {
  display: inline-block;        /* Treat icons as inline elements with block-like properties */
  width: 24px;                  /* Default size for desktop screens */
  height: 24px;                 /* Matches width for square icons */
  margin-right: 8px;            /* Space between icon and text */
  vertical-align: middle;       /* Aligns icon with text baseline */
  object-fit: contain;          /* Prevents distortion if aspect ratio differs */
  flex-shrink: 0;               /* Stops icons from shrinking in flex layouts */
  max-width: 100%;              /* Fluid safeguard: prevents overflow in narrow containers */
  height: auto;                 /* Maintains aspect ratio when scaling */
}

/* Tablet breakpoint adjustments
   Reason: Slightly reduce icon size so they don’t crowd text on medium screens */
@media (max-width: 1024px) {
  #uagb-tabs__tab0::before,
  #uagb-tabs__tab1::before,
  #uagb-tabs__tab2::before {
    width: 20px;
    height: 20px;
  }
}

/* Mobile breakpoint adjustments
   Reason: Further reduce icon size for compact menus and small screen real estate */
@media (max-width: 600px) {
  #uagb-tabs__tab0::before,
  #uagb-tabs__tab1::before,
  #uagb-tabs__tab2::before {
    width: 18px;
    height: 18px;
  }
}

/* Optional: SVG optimization
   Reason: If icons are swapped to SVGs, ensure they scale crisply without tiling */
#uagb-tabs__tab0::before,
#uagb-tabs__tab1::before,
#uagb-tabs__tab2::before {
  background-size: contain;     /* Fit SVGs neatly inside defined box */
  background-repeat: no-repeat; /* Prevent repeating patterns if SVG is misapplied */
}

/* ============================================================
   Responsive Hero Background Images
   Purpose: Serve different hero image sizes for desktop, tablet, and mobile
   to improve LCP and overall performance scores.
   ============================================================ */

/* Default desktop hero background
   - Loads the full-size hero image (1920px wide)
   - Ensures the image covers the container and stays centered */
.elementor-1448 .elementor-element.elementor-element-0a002a8 > .elementor-container {
    background-image: url('/wp-content/uploads/2025/11/hero-1920.webp');
    background-size: cover;       /* Scale image to cover entire container */
    background-position: center;  /* Keep image centered regardless of screen size */
}

/* Tablet hero background
   - Triggered when viewport width is 1024px or less
   - Loads a medium-size hero image (768px wide) for faster load times */
@media (max-width: 1024px) {
    .elementor-1448 .elementor-element.elementor-element-0a002a8 > .elementor-container {
        background-image: url('/wp-content/uploads/2025/11/hero-768.webp');
        background-size: cover;
        background-position: center;
    }
}

/* Mobile hero background
   - Triggered when viewport width is 767px or less
   - Loads a small-size hero image (480px wide) optimized for mobile devices */
@media (max-width: 767px) {
    .elementor-1448 .elementor-element.elementor-element-0a002a8 > .elementor-container {
        background-image: url('/wp-content/uploads/2025/11/hero-480.webp');
        background-size: cover;
        background-position: center;
    }
}
/* 
===============================================================================
Berkshire/Coventry Projects – Horizontal Scroll Timeline Styles
This stylesheet powers the modern horizontal timeline used on Project pages.
It works with the [bc_project_timeline] shortcode output.
===============================================================================
*/

/* 
-----------------------------------------
Timeline Wrapper
- Creates a horizontal scroll area
- Ensures timeline can overflow horizontally
-----------------------------------------
*/
.bc-timeline-wrapper {
    width: 100%;
    overflow-x: auto;      /* Enables horizontal scrolling */
    padding: 20px 0;
    scroll-behavior: smooth; /* Smooth scrolling for better UX */
}

/* 
-----------------------------------------
Scroll Container
- Holds all timeline items in a row
- Uses flexbox to align items horizontally
-----------------------------------------
*/
.bc-timeline-scroll {
    display: flex;
    align-items: flex-start;
    gap: 60px;             /* Space between timeline items */
    position: relative;
    padding-bottom: 40px;  /* Space for cards below dots */
}

/* 
-----------------------------------------
Connecting Line
- The horizontal line behind the dots
-----------------------------------------
*/
.bc-timeline-line {
    position: absolute;
    top: 20px;             /* Aligns line with dots */
    left: 0;
    height: 4px;
    width: 100%;
    background: #d0d0d0;   /* Light gray line */
    z-index: 1;
}

/* 
-----------------------------------------
Timeline Item
- Each milestone container
-----------------------------------------
*/
.bc-timeline-item {
    position: relative;
    text-align: center;
    min-width: 160px;      /* Ensures consistent spacing */
}

/* 
-----------------------------------------
Timeline Dot
- The circular milestone marker
- Sits above the connecting line
-----------------------------------------
*/
.bc-timeline-dot {
    width: 18px;
    height: 18px;
    background: #0073e6;   /* Primary blue color */
    border-radius: 50%;
    position: relative;
    z-index: 2;            /* Ensures dot sits above the line */
    margin: 0 auto;
    border: 3px solid white;
    box-shadow: 0 0 0 3px #0073e6; /* Outer ring effect */
}

/* 
-----------------------------------------
Timeline Card
- The box containing date, title, description
- Appears below each dot
-----------------------------------------
*/
.bc-timeline-card {
    margin-top: 20px;
    background: white;
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    min-width: 160px;
}

/* 
-----------------------------------------
Date Text
- Styled to stand out as the milestone date
-----------------------------------------
*/
.bc-timeline-date {
    font-weight: bold;
    color: #0073e6;
    margin-bottom: 6px;
}

/* 
-----------------------------------------
Title Text
- The milestone title
-----------------------------------------
*/
.bc-timeline-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

/* 
-----------------------------------------
Description Text
- Supporting detail for each milestone
-----------------------------------------
*/
.bc-timeline-desc {
    font-size: 14px;
    color: #555;
}

/* 
-----------------------------------------
Scrollbar Styling
- Makes the horizontal scrollbar look nicer
-----------------------------------------
*/
.bc-timeline-wrapper::-webkit-scrollbar {
    height: 8px;
}

.bc-timeline-wrapper::-webkit-scrollbar-thumb {
    background: #0073e6;
    border-radius: 4px;
}