/* Charitize header theme styles (external CSS) */
:root {
  --charitize-primary: #f0a202; /* theme orange */
  --charitize-secondary: #000080; /* theme green */
  --bs-primary: #f0a202;
  --bs-secondary: #000080;
  --bs-dark: #212529;
  --bs-white: #ffffff;
  --bs-tertiary: #797E88;
}

.charitize-topbar { background-color: var(--charitize-secondary); }
.charitize-secondary-bg { background-color: var(--charitize-secondary); }
.charitize-primary-bg { background-color: var(--charitize-primary); }
.charitize-text-primary { color: var(--charitize-primary); }

.charitize-brand {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 700;
  color: var(--charitize-primary);
}

.btn-square {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-bar .btn-square { width: 36px; height: 36px; }

.nav-bar { padding: 0 90px; transition: .5s; }
.top-bar { height: 90px; padding: 0 90px; }

/* Nav link colors to match theme (dark text on orange, white on hover) */
.navbar .navbar-nav .nav-link {
  margin-right: 30px;
  padding: 20px 0;
  color: var(--bs-dark);
  font-size: 18px;
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active { color: var(--bs-white); }

/* Bootstrap component theming to Charitize palette */
.text-primary{color:var(--charitize-primary)!important}
.bg-primary{background-color:var(--charitize-primary)!important}
.btn-primary{background-color:var(--charitize-primary)!important;border-color:var(--charitize-primary)!important;color:#fff}
.btn-primary:hover{background-color:#d68f02!important;border-color:#d68f02!important;color:#fff}

.text-secondary{color:var(--charitize-secondary)!important}
.bg-secondary{background-color:var(--charitize-secondary)!important}
.btn-secondary{background-color:var(--charitize-secondary)!important;border-color:var(--charitize-secondary)!important;color:#fff}
.btn-secondary:hover{background-color:#0a463b!important;border-color:#0a463b!important;color:#fff}

.navbar .dropdown-toggle::after {
  border: none;
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  vertical-align: middle;
  margin-left: 8px;
}

/* Spacing tweaks to mirror theme header proportions */
.top-bar h1.display-5,
.charitize-brand { margin: 0; }

/* Responsive: hide topbar info on small screens (as theme does) */
@media (max-width: 991.98px) {
  .d-lg-block { display: none !important; }
  .navbar .navbar-nav .nav-link { margin-right: 0; padding: 10px 0; }
  .navbar .navbar-nav { margin-top: 20px; border-top: 1px solid #fff; }
}
.page-header{background:url(../img/bg.jpg) center center no-repeat;background-size:cover}
.page-header .breadcrumb-item+.breadcrumb-item::before{color:var(--bs-tertiary)}
.page-header .breadcrumb-item,.page-header .breadcrumb-item a{font-size:18px;color:var(--bs-primary)}
.page-header .breadcrumb-item.active{color:var(--bs-dark)}

/* Utility: make a section span full viewport width even inside container */
.full-bleed{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw}

/* Play button for video strip */
.btn-play{position:relative;display:block;box-sizing:content-box;width:16px;height:26px;border:none;outline:none!important;padding:18px 20px 20px 28px;background:var(--bs-dark)}
.btn-play:before{content:"";position:absolute;z-index:0;left:50%;top:50%;transform:translate(-50%,-50%);display:block;width:60px;height:60px;background:var(--bs-dark);animation:pulse-border 1500ms ease-out infinite;border-radius:50%}
.btn-play:after{content:"";position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);display:block;width:60px;height:60px;background:var(--bs-dark);border-radius:50%}
.btn-play span{position:relative;display:block;z-index:3;width:0;height:0;border-left:16px solid var(--bs-white);border-top:10px solid transparent;border-bottom:10px solid transparent}
@keyframes pulse-border{0%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(1.35);opacity:0}}

/* Header bar / top strip */
.header-top,
.header,
.navbar,
.navbar.bg-primary,
.navbar-default,
.site-header {
  background-color: #F5F5F5 !important;
  border-color: #F5F5F5 !important;
}

/* If your menu uses a separate background */
.navbar .navbar-nav > li > a,
.navbar .navbar-brand {
  /* keep text readable on the new purple */
  color: #ffffff !important;
}

/* Optional: hover/active states to a darker shade */
.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li.active > a {
  background-color: #F5F5F5 !important; /* slightly darker */
  color: #ffffff !important;
}

/* Force header bars to purple */
.header-top,
.topbar,
.navbar,
.navbar.navbar-expand-lg,
.navbar.navbar-light,
.navbar.navbar-dark,
.site-header,
.header,
#header,
#topbar,
.main-header {
  background-color: #F5F5F5 !important;
  border-color: #F5F5F5 !important;
}

/* Menu strip (orange) -> purple */
.navbar,
.navbar .container,
.navbar .navbar-collapse,
.navbar .navbar-nav {
  background-color: #F5F5F5 !important;
}

/* Ensure text is readable */
.navbar .navbar-brand,
.navbar .navbar-nav > li > a,
.topbar a,
.topbar .text,
.header a {
  color: #ffffff !important;
}

/* Hover state */
.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li.active > a {
  background-color: #6A5ACD !important;
  color: #ffffff !important;
}