:root {
  /* ===================================================
     BRAND COLOR PALETTE MAPPING
     =================================================== */
  --scouting-red: #ce1126;       
  --scouting-blue: #003f87;     
  --scouting-tan: #d6cebd;        
  --scouting-gray: #515354;        
  --white: #ffffff;   
  --black: #000;    
  --pale-blue: #9ab3d5;          
  --dark-blue: #036;        
  --light-tan: #e9e9e4;   
  --dark-tan: #ad9d7b;
  --pale-gray: #858787;
  --dark-gray: #232528;
  --cub-scout-gold: #fdc116;
  --scouting-olive: #243e2c;

  /* Font Family Override */
  --font-family-base: 'Roboto', Arial, sans-serif;
}
/* Global Text Formatting Overrides*/
p {
    line-height: 1.25;
}


/* ===================================================
   West Hartford BSA BRAND COLOR OVERRIDES
   =================================================== */

/* Global Links & Text Accents */
a, 
a:focus, 
a:hover,
.text-primary{
  color: var(--scouting-blue) !important; /* Primary Navy */
  text-decoration: underline !important;   
}




/* Basic Buttons & Call-to-Actions */
.btn-template-main,
.btn-template-main:focus,
.btn-template-transparent-black:hover,
.btn-template-transparent-primary {
  background-color: var(--scouting-blue) !important;
  border-color: var(--white) !important;
  color: var(--white) !important;
}

/* Basic Button Hover State (Secondary/Accent Red) */
.btn-template-main:hover,
.btn-template-main:active {
  background-color: var(--dark-blue) !important;
  border-color: var(--white) !important;
  color: var(--white) !important;
}
/* Large Buttons - shortcode buttons */
.btn-custom-large {
    /* Button Shape ans Size */ 
    font-size: 2.5rem !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    display: block !important;
    margin: 20px auto !important; 
    width: max-content !important;
    text-decoration: none !important;   


    /* Color Customization */
    background-color: var(--scouting-blue) !important; /* Changes the background color (e.g., Emerald Green) */
    color: var(--white) !important;            /* Changes the text color (White) */
    border: 2px solid var(--scouting-red) !important; /* Changes the border outline color */
    
    /* Smooth Transition Effect */
    transition: all 0.2s ease !important;  /* Makes the hover color change smoothly instead of instantly */
}

/* Hover Large Button State - shortcode buttons */
.btn-custom-large:hover {
    background-color: var(--dark-blue) !important; /* Darker green background on hover */
    color:var(--white)rtant;            /* Keeps text white on hover */
    border-color: var(--scouting-red) !important;     /* Darker border on hover */
    cursor: pointer !important;           /* Forces the pointer finger icon */
    text-decoration: none !important;   

}

/* Navbar Link Overrides - separates some formatting from Global Links */
#navigation a,
#navigation .navbar-nav > .active > a,
#navigation .navbar-nav > li > a:hover,
#navigation .navbar-nav > li > a:focus  {
  color: var(--white) !important; /* Primary Navy */
  text-decoration: none !important;   
}

/* Navigation Bar & Active Headers */
.navbar-default,
#navbar {
  background-color: var(--scouting-blue) !important;
  border-bottom: 2px solid var(--scouting-red) !important;
}

/* Active Page Indicator in Navigation */
#navigation .navbar-nav > .active > a,
#navigation .navbar-nav > .active > a:hover,
#navigation .navbar-nav > .active > a:focus {
  background-color: transparent var(--black) !important;
  border-bottom: 3px solid var(--white) !important;
}

/* Force the desktop navbar to stay hidden and show the hamburger menu 
   on wider screens (up to 1200px instead of the default 768px/992px) */
@media (max-width: 1200px) {
    .navbar-header {
        float: none !important;
    }
    .navbar-toggle {
        display: block !important; /* Forces hamburger menu to appear */
    }
    .navbar-collapse {
        border-top: 1px solid transparent !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1) !important;
    }
    .navbar-collapse.collapse {
        display: none !important; /* Hides the normal horizontal links */
    }
    .navbar-nav {
        float: none !important;
        margin: 7.5px -15px !important;
    }
    .navbar-nav > li {
        float: none !important;
    }
    .navbar-nav > li > a {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    .navbar-collapse.in {
        display: block !important; /* Allows the hamburger menu to expand when clicked */
    }
}


/* Header Utility Top Bar */
#top,
.top-bar {
  background-color: var(--dark-blue) !important;
  color: var(--white) !important;
  display: flex;
  justify-content: center;
}

#top a {
  color: var(--cub-scout-gold) !important; /* Accent Gold for top links */
}

#top p {
  text-align: center;   /* Centers the text */
  line-height: 1.8;     /* Increases text height/spacing (1.5 to 2.0 is ideal for readability) */
  font-size: 20px; /
}

/* Top Bar Custom Paragraph */
.custom-paragraph {
  text-align: center;   /* Centers the text */
}

.custom-link {
  color: var(--scouting-red);       /* Changes the link color */
  text-decoration: underline; /* Ensures the link is underlined */
}

.custom-link:hover {
  color: var(--scouting-blue);       /* Darkens the link when hovered over */
}
/* Theme Section Banners & Featured Boxes */
.bar.color-white,
.heading h1, .heading h2, .heading h3, .heading h4, .heading h5, .heading h6 {
  border-bottom-color: var(--scouting-blue) !important;
}

.box-simple .icon {
  color: var(--white) !important;
  border-color: var(--scouting-blue) !important;
}

.box-simple:hover .icon {
  background-color: var(--dark-blue) !important;
  color: var(--white) !important;
}

/* 6. Footer & Copyright Bar */
#footer {
  background-color: var(--dark-gray) !important;
  color: var(--white) !important;
}


#footer a {
  color: var(--white) !important;
}

#copyright {
  background-color: #1B1919 !important;
  color: var(--pale-gray) !important;
  padding: 10px 0px 50px 0px;
  font-size: 12px;
  line-height: 28px;
}

/* Copyright Class Link Overrides */
#copyright,
#copyright a, 
#copyright a:focus, 
#copyright a:hover {
  color: var(--white) !important; /* Primary Navy */
}

/* Create a layout isolation block inside your blog post */
.blog-video-wrapper {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    margin: 30px 0 !important;
}

/* Center the video box horizontally within that block using auto margins */
.blog-video-wrapper .video-inner {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}


/* Responsive Video Container Styles */
.video-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  margin: 20px 0;
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  width: 100%;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Desktop Side-by-Side Media Query */
@media (min-width: 768px) {
  .video-grid {
    flex-direction: row;
  }
  .video-container-half {
    flex: 1;
  }
}


/* Outer Grid Wrapper */
.two-column-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: 2rem auto;
  width: 100%;
  max-width: 900px;
}

/* Desktop View: Keep side-by-side columns centered */
@media (min-width: 768px) {
  .two-column-wrapper {
    flex-direction: row;
    justify-content: center; /* Centers columns horizontally if max-width isn't reached */
  }
}

/* Individual Column */
.cards-column {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cards-column-title {
  text-align: center;
  margin-bottom: 1rem;
  color: var(--black); /* Header color */
}

.cards-column-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

/* Individual Card Styling */
.card-item {
  display: flex;
  align-items: center;      /* Vertically center content */
  justify-content: center; /* Horizontally center content */
  text-align: center;
  padding: 1.25rem;
  min-height: 90px;
  line-height: 1.75;
  flex: 1 1 0px;
  min-height: 200px;
  


  /* Customizable Theme Properties */
  background-color: #dddddd; /* Card background color */
  color: var(--black);            /* Card text color */
  border: 2px solid var(--dark-blue); /* Border width & color */
  border-radius: 6px;        /* Corner roundness */
}

/* Ensure paragraph wrapper inside card stays centered */
.card-item-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.card-item-content p {
  margin: 0; /* Prevents paragraph margins from messing up vertical centering */
}

/* Switches to 2 side-by-side columns on tablet & desktop (768px+) */
@media (min-width: 768px) {
  .two-column-wrapper {
    flex-direction: row;
  }
}

/* Scroll-to-top button */
#back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: none; /* Hidden by default */
  z-index: 9999;
  background-color: var(--scouting-blue); /* Change to match your theme accent */
  color: #ffffff;
  border: none;
  outline: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: opacity 0.3s ease, background-color 0.3s ease;
}

#back-to-top:hover {
  background-color: var(--scouting-blue);
}