/* Concrete CMS Fixes compiled in Sandbox SCSS */

/* Colours

Love In Action:
$red: #e5033e !default;

Frontline:
$blue: #025291 !default;
$gradient-1: linear-gradient(142deg, #025291, #0385d1);
$gradient-2: linear-gradient(142deg, #025291, #0385d1);

Friends Together:
$purple: #a45197 !default;
$gradient-3: linear-gradient(142deg, #a45197, #952984);
$gradient-4: linear-gradient(142deg, #952984, #a45197);

Foodbank:
$green: #02ab51 !default;
$gradient-5: linear-gradient(142deg, #02ab51, #65b340);
$gradient-6: linear-gradient(142deg, #65b340, #02ab51);

Signposts:
$leaf: #b0cc25 !default;
$gradient-7: linear-gradient(142deg, #b0cc25, #96b017);
$gradient-8: linear-gradient(142deg, #96b017, #b0cc25);

Youth:
$orange: #e84e0e !default;

Farnham Churches Network:
$aqua: #02D8E9 !default;

$navy: #343f52 !default;
$ash: #9499a3 !default;

/* CSS Theme Override Document for Theme Specific Styles */

div.header-banner {
    width: 100%;
    height: calc(3rem + 3vw);
    max-height: 150px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #012332;
}

div.header-banner a {
    display: block;
    height: 100%;
    width: 100%; /* Make anchor fill width too */
}

div.header-banner a img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover; /* This is the key property */
}

div.header-banner {
    /*display: none;*/ /* Hide Christmas banner */
}

.carols-gostrey-meadow div.header-banner,
.christmas-in-farnham div.header-banner {
    display: flex;
}
.christmas-in-farnham div.header-banner {
    height: calc(4rem + 5vw);
    max-height: 150px;
}
.christmas-in-farnham section.bg-gray-300,
.carols-gostrey-meadow section.bg-gray-300 {
    background: var(--bs-gray-800) !important;
}
.christmas-in-farnham section.bg-gray-300 .container {
    padding-top: 1rem !important;
}
.christmas-in-farnham section.bg-light {
    background-color: #011d29 !important;
    background-image: url("./bg/christmas-in-farnham-2025-bg.jpg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
}
.carols-gostrey-meadow section.bg-light {
    background-color: #011d29 !important;
    background-image: url("./bg/christmas-in-farnham-2025-bg-50.jpg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
}
    .christmas-in-farnham section.bg-gray-300 h1,
    .christmas-in-farnham section.bg-light h3,
    .christmas-in-farnham section.bg-gray-300 p,
    .carols-gostrey-meadow section.bg-gray-300 h1,
    .carols-gostrey-meadow section.bg-gray-300 h2,
    .carols-gostrey-meadow section.bg-gray-300 h3,
    .carols-gostrey-meadow section.bg-gray-300 p,
    .carols-gostrey-meadow section.bg-light h3,
    .carols-gostrey-meadow section.bg-light p {
        color: #ffffff;
        filter: drop-shadow(2px 2px 8px var(--bs-dark));   
    }
    .carols-gostrey-meadow section.bg-light p strong,
    .carols-gostrey-meadow section.bg-light p em {
        color: var(--bs-primary); 
    }
    .christmas-in-farnham section.bg-light .card,
    .carols-gostrey-meadow section.bg-light .card {
        background: rgba(255,255,255,0.9);
    }

ul.navbar-nav li.nav-item a.nav-active,
ul.navbar-nav li.nav-item a.nav-path-active {
    color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
    text-decoration: none;
}
.navbar-brand {
    position: relative;
}
.navbar-brand img {
    max-width: 100%;
    height: auto;
    z-index: 99;
    position: relative;
}
.navbar-brand {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}
@media (min-width: 576px) {
    .navbar-brand {
        padding-top: 0.625rem !important;
        padding-bottom: 0.625rem !important;
    }
}
nav.navbar-logo .navbar-brand {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.navlogo-fixed {
    display: none;
}
.navbar.fixed .navlogo-fixed {
    display: block;
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
    padding-right: 0.625rem !important; 
    padding-left: 0.125rem !important;
}
.navbar-other ul.navbar-nav li.nav-item {
    padding: 0.5rem 0;
}

.swiper-container {
    overflow: hidden;
}
.swiper-container.swiper-hero .swiper .swiper-slide .swiper-img {
    position: relative;
    z-index: 2;
}
.swiper-container.swiper-hero .swiper .swiper-slide .swiper-txt {
    position: relative;
    z-index: 1;
    text-wrap: balance;
}
.swiper-container.swiper-hero .swiper .swiper-slide .swiper-img img {
    width: auto;
    height: auto;
    filter: drop-shadow(2px 2px 32px var(--bs-light))
            drop-shadow(-2px 2px 32px var(--bs-light))
            drop-shadow(2px -2px 32px var(--bs-light))
            drop-shadow(-2px -2px 32px var(--bs-light));
}
.swiper-wrapper.ticker .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    text-align: center;
    width: fit-content;
}
.card .card-header:not(.card-header-hosted) {
    padding: calc(var(--bs-card-spacer-y) / 2) var(--bs-card-spacer-x);
}

.card table {
    margin-left: calc(var(--bs-card-spacer-x) * -1) !important;
    width: calc(100% + (var(--bs-card-spacer-x) * 2)) !important;
    border: none;
    border-collapse: inherit;
}
.card table th {
    white-space: nowrap;
}

.card p.card-links {
    float: left;
    clear: left;
    width: 100%;
    margin-bottom: 0.5rem;
}
.card p.card-links i {
   float: left;
   clear: left;
   margin-right: 0.5em;
}
.card p.card-links a,
.card p.card-links span.info,
.card p.card-links span.address {
   float: left;
   max-width: calc(100% - 2em);
}

.card .card-body {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 1rem !important;
}
@media (min-width: 576px) {
    .card .card-body {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        padding-top: 1.25rem !important;
    }
}
@media (min-width: 768px) {
    .card .card-body {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        padding-top: 1.5rem !important;
    }
}
.card.event-item .card-footer {
    background-color: var(--bs-gray-100) !important;
}

/* section.page-content .h1, section.page-content h1,
section.page-content .h2, section.page-content h2,
section.page-content .h3, section.page-content h3,
section.page-content .h4, section.page-content h4,
section.page-content .lead {
  white-space: unset;
    text-wrap: balance;
} */
section.page-content p,
section.page-content li,
section.page-content .h5, section.page-content h5,
section.page-content .h6, section.page-content h6 {
    text-wrap: pretty;
}

footer section p,
footer section li,
footer section address {
    color: var(--bs-gray-500) !important;
}

footer section p a {
    color: var(--bs-gray-400) !important;
}


footer section h4,
footer section p a:hover {
    color: var(--bs-light) !important;
}

section.bg-farnham,
section.bg-candle {
    position: relative;
    background: var(--bs-dark) !important;
    overflow: hidden;
}
section.bg-farnham video,
section.bg-candle video {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  z-index: 0;
}
section.bg-farnham .container,
section.bg-candle .container {
    position: relative;
    z-index: 2;
}
div.text-light h1,
div.text-light h2,
div.text-light h3,
div.text-light h4,
div.text-light h5,
div.text-light h6,
div.text-light a,
section.bg-farnham h1,
section.bg-farnham h2,
section.bg-farnham h3,
section.bg-farnham p,
section.bg-farnham li,
section.bg-candle p,
section.bg-candle li {
    color: var(--bs-light) !important;
}
section.bg-farnham .stat,
section.bg-farnham h2+p.lead,
section.bg-farnham h4,
section.bg-farnham strong,
section.bg-candle h1,
section.bg-candle h2,
section.bg-candle h3,
section.bg-candle h4,
section.bg-candle strong {
    color: #ffe400 !important;
}
section.bg-candle a.btn {
    color: #000000 !important;
    background-color: #ffffff !important;
}

section.bg-farnham .stat {
    font-size: 4rem;
    display: block;
    line-height: 4rem;
}
section.bg-farnham .stat::after {
  content: "\a";
  white-space: pre;
}

section.bg-candle {
  background-color: #000000 !important;
}
section.bg-candle video {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: contain;
  object-position: bottom left;
  opacity: 1;
  z-index: 0;
}

div.ccm-page h2+p.lead.lh-sm {
    line-height: 1.15 !important;
    margin-top: -0.5rem !important;
} 

section.bg-features {
    background: linear-gradient(90deg, #eee5d9, #ffffff, #eee5d9);
}
.mission-vision-and-values section.bg-features {
    padding-top: 2rem;
    padding-bottom: 3rem;
    background-image: url("./bg/our-values-heart.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}
.mission-vision-and-values section.bg-features .light-card .card {
    background-color: rgba(var(--bs-light-rgb),0.7) !important;
}
section.bg-features .feature-block {
    max-width: 32rem;
    margin: 2rem auto;
}
section.bg-features .feature-block p {
    color: var(--bs-gray-600);
}


/* Project Pages */ 

.testimonials h2 {
    color: var(--bs-gray-200);
}
.testimonials p.lead {
    color: var(--bs-gray-400);
}
.testimonials .swiper-controls .swiper-pagination .swiper-pagination-bullet {
    background: var(--bs-gray-200);
}
.testimonials .swiper-controls .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    border-color: var(--bs-gray-200);
}
.timeline p.lead {
    color: var(--bs-gray-600);
}
.timeline .dates {
    border-left: 0.25rem solid var(--bs-dark);
    padding-left: calc(2rem + .33vw);
    padding-bottom: 3rem;
    margin-left: calc(1rem + .165vw);
    padding-right: calc(1rem + .165vw);
}
.timeline .dates h3 {
    margin-top: 2rem;
    line-height: 1rem;
    font-weight: 700;
    color: var(--bs-red);
}
.timeline .dates h3::before {
    content: "";
    display: inline-block;
    background: var(--bs-white);
    border: 0.25rem solid var(--bs-dark);
    border-radius: 50rem;
    padding: 0.6em;
    margin-top: -0.43em;
    margin-left: calc(-2.325rem - .33vw - 0.6em);
    float: left;
}
.farnham-foodbank .timeline .dates h3 {
    color: var(--bs-green);
}
.frontline-farnham-money-advice .timeline .dates h3 {
    color: var(--bs-blue);
}
.friends-together-bereavement-support .timeline .dates h3 {
    color: var(--bs-purple);
}
.signposts-schools-work .timeline .dates h3 {
    color: var(--bs-leaf);
}
.cohesion-youth .timeline .dates h3 {
    color: var(--bs-orange);
}

/* Misc Styles */

.ccm-image-block,
.ccm-edit-mode-disabled-item {
    margin-bottom: 1rem;
}
.swiper-container .swiper img.church-logo {
    transform: scale(0.6);
}
.swiper-container .swiper span.church-logo {
    opacity: 0.7;
    font-size: 1em;
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .swiper-container .swiper img.church-logo {
        transform: scale(0.7);
    }
    .swiper-container .swiper span.church-logo {
    font-size: 1.05em;
    }
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    div.ccm-page section.page-content .cc-2 {
      column-count: 2;
    }
    div.ccm-page section.page-content .cc-3 li,
    div.ccm-page section.page-content .cc-2 li {
      display: list-item;
      width: 100%;
    }
    .swiper-container .swiper img.church-logo {
        transform: scale(0.8);
    }
    .swiper-container .swiper span.church-logo {
    font-size: 1.1em;
    }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .navbar-brand::before {
      content: '';
      position: absolute;
      z-index: 98;
      background-color: var(--bs-dark);
      top: 1.25rem;
      left: 0.25rem;
      right: 0.25rem;
      bottom: 1.25rem;
  }
  div.ccm-page section.page-content .cc-2.cc-3 {
    column-count: 3;
  }
  div.home-stats {
    display: flex;
    flex-direction: column;
    height: 85%;
    margin-top: auto;
  }
  .swiper-container .swiper img.church-logo {
      transform: none;
  }
    .swiper-container .swiper span.church-logo {
    font-size: 1.15em;
    }
  section.bg-candle video {
    object-position: bottom center;
  }
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .swiper-container .swiper span.church-logo {
    font-size: 1.2em;
  }
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}




/* Theme alterations for the FCCT Theme
Love in Action  : e5033e  :hover ff0043 
Frontline : 025291
Foodbank : 02ab51
Schools : b0cc25
Friends : a45197
Grey : 888888
Black : 333333
*/

/* Frontline Colours 

div.ccm-page .frontline .sc_skills_count {
	background-color: #025291 !important;
	border-color: #025291 !important;
}
div.ccm-page .frontline .card .card-divider:first-of-type,
div.ccm-page .card.frontline .card-divider:first-of-type,
div.ccm-page .frontline .button:not(.secondary),
div.ccm-page .button.frontline:not(.secondary),
div.ccm-page .frontline #testimonials .swiper-pagination-bullet-active {
	background: #025291;
  background:; 
}
div.ccm-page .frontline .button:not(.secondary)::before,
div.ccm-page .button.frontline:not(.secondary)::before {
	background: #025291;
  background: linear-gradient(142deg, #025291, #0385d1); 
}
div.ccm-page .button.frontline:not(.secondary) {
	background: #025291 !important;
  background: linear-gradient(142deg, #025291, #0385d1) !important; 
}
div.ccm-page .button.frontline:not(.secondary)::before {
	background: #025291 !important;
  background: linear-gradient(142deg, #025291, #0385d1) !important; 
}
div.ccm-page .frontline .button.secondary.icon-arrow::after,
div.ccm-page .button.frontline.secondary.icon-arrow::after,
div.ccm-page .frontline a:not(.button),
div.ccm-page .frontline strong.highlight,
div.ccm-page #together .frontline h4,
div.ccm-page #together .frontline .goal .label,
div.ccm-page #together .frontline .goal .value,
div.ccm-page .frontline #focus h4,
div.ccm-page .frontline #support .goal .label,
div.ccm-page .frontline #support .goal .value,
div.ccm-page .frontline #testimonials h2,
div.ccm-page .frontline #testimonials strong,
div.ccm-page .frontline #testimonials .callout p:first-child:before,
div.ccm-page .frontline #timeline h3, 
div.ccm-page .frontline #timeline strong {
	color: #025291 !important;
} 
div.ccm-page .frontline a:not(.button):hover {
	color: #0385d1 !important;
} 
div.ccm-page .frontline .button strong,
div.ccm-page .frontline.button strong {
	color: #ffffff !important;
}


/* Friends Together Colours 

div.ccm-page .friends .sc_skills_count {
	background-color: #a45197 !important;
	border-color: #a45197 !important;
}
div.ccm-page .friends .button:not(.secondary),
div.ccm-page .button.friends:not(.secondary),
div.ccm-page .friends #testimonials .swiper-pagination-bullet-active  {
	background: #a45197;
  background: linear-gradient(142deg, #a45197, #952984); 
}
div.ccm-page .friends .card .card-divider:first-of-type,
div.ccm-page .card.friends .card-divider:first-of-type,
div.ccm-page .friends .button:not(.secondary)::before,
div.ccm-page .button.friends:not(.secondary)::before {
	background: #952984;
  background: linear-gradient(142deg, #952984, #a45197); 
}
div.ccm-page .button.friends:not(.secondary)  {
	background: #a45197 !important;
  background: linear-gradient(142deg, #a45197, #952984) !important; 
}
div.ccm-page .button.friends:not(.secondary)::before {
	background: #952984 !important;
  background: linear-gradient(142deg, #952984, #a45197) !important; 
}
div.ccm-page .friends .button.secondary.icon-arrow::after,
div.ccm-page .button.friends.secondary.icon-arrow::after,
div.ccm-page .friends a:not(.button),
div.ccm-page .friends strong.highlight,
div.ccm-page #together .friends h4,
div.ccm-page #together .friends .goal .label,
div.ccm-page #together .friends .goal .value,
div.ccm-page .friends #focus h4,
div.ccm-page .friends #support .goal .label,
div.ccm-page .friends #support .goal .value,
div.ccm-page .friends #testimonials h2,
div.ccm-page .friends #testimonials strong,
div.ccm-page .friends #testimonials .callout p:first-child:before,
div.ccm-page .friends #timeline h3, 
div.ccm-page .friends #timeline strong {
	color: #a45197 !important;
} 
div.ccm-page .friends a:not(.button):hover {
	color: #952984 !important;
} 
div.ccm-page .friends .button strong,
div.ccm-page .friends.button strong {
	color: #ffffff !important;
}


/* Foodbank Colours 

div.ccm-page .foodbank .sc_skills_count {
	background-color: #02ab51 !important;
	border-color: #02ab51 !important;
}
div.ccm-page .foodbank .card .card-divider:first-of-type,
div.ccm-page .card.foodbank .card-divider:first-of-type,
div.ccm-page .foodbank .button:not(.secondary),
div.ccm-page .button.foodbank:not(.secondary),
div.ccm-page .foodbank #testimonials .swiper-pagination-bullet-active {
	background: #02ab51;
  background: linear-gradient(142deg, #02ab51, #65b340); 
}
div.ccm-page .foodbank .button:not(.secondary)::before,
div.ccm-page .button.foodbank:not(.secondary)::before {
	background: #2e733f;
  background: linear-gradient(142deg, #65b340, #02ab51); 
}
div.ccm-page .button.foodbank:not(.secondary) {
	background: #65b340 !important;
  background: linear-gradient(142deg, #02ab51, #65b340) !important; 
}
div.ccm-page .button.foodbank:not(.secondary)::before {
	background: #2e733f !important;
  background: linear-gradient(142deg, #65b340, #02ab51) !important; 
}
div.ccm-page .foodbank .button.secondary.icon-arrow::after,
div.ccm-page .button.foodbank.secondary.icon-arrow::after,
div.ccm-page .foodbank a:not(.button),
div.ccm-page .foodbank strong.highlight,
div.ccm-page #together .foodbank h4,
div.ccm-page #together .foodbank .goal .label,
div.ccm-page #together .foodbank .goal .value,
div.ccm-page .foodbank #focus h4,
div.ccm-page .foodbank #support .goal .label,
div.ccm-page .foodbank #support .goal .value,
div.ccm-page .foodbank #testimonials h2,
div.ccm-page .foodbank #testimonials strong,
div.ccm-page .foodbank #testimonials .callout p:first-child:before,
div.ccm-page .foodbank #timeline h3, 
div.ccm-page .foodbank #timeline strong {
	color: #02ab51 !important;
} 
div.ccm-page .foodbank a:not(.button):hover {
	color: #2e733f !important;
} 
div.ccm-page .foodbank .button strong,
div.ccm-page .foodbank.button strong {
	color: #ffffff !important;
}


/* Schools Colours 

div.ccm-page .schools .sc_skills_count {
	background-color: #b0cc25 !important;
	border-color: #b0cc25 !important;
}
div.ccm-page .schools .button:not(.secondary),
div.ccm-page .button.schools:not(.secondary),
div.ccm-page .schools #testimonials .swiper-pagination-bullet-active {
	background: #b0cc25;
  background: linear-gradient(142deg, #b0cc25, #96b017); 
}
div.ccm-page .schools .card .card-divider:first-of-type,
div.ccm-page .card.schools .card-divider:first-of-type,
div.ccm-page .schools .button:not(.secondary)::before,
div.ccm-page .button.schools:not(.secondary)::before {
	background: #96b017;
  background: linear-gradient(142deg, #96b017, #b0cc25); 
}
div.ccm-page .button.schools:not(.secondary) {
	background: #b0cc25 !important;
  background: linear-gradient(142deg, #b0cc25, #96b017) !important; 
}
div.ccm-page .button.schools:not(.secondary)::before {
	background: #96b017 !important;
  background: linear-gradient(142deg, #96b017, #b0cc25) !important; 
}
div.ccm-page .schools .button.secondary.icon-arrow::after,
div.ccm-page .button.schools.secondary.icon-arrow::after,
div.ccm-page .schools a:not(.button),
div.ccm-page .schools strong.highlight,
div.ccm-page #together .schools h4,
div.ccm-page #together .schools .goal .label,
div.ccm-page #together .schools .goal .value,
div.ccm-page .schools #focus h4,
div.ccm-page .schools #support .goal .label,
div.ccm-page .schools #support .goal .value,
div.ccm-page .schools #testimonials h2,
div.ccm-page .schools #testimonials strong,
div.ccm-page .schools #testimonials .callout p:first-child:before,
div.ccm-page .schools #timeline h3, 
div.ccm-page .schools #timeline strong {
	color: #b0cc25 !important;
} 
div.ccm-page .schools a:not(.button):hover {
	color: #96b017 !important;
} 
div.ccm-page .schools .button strong,
div.ccm-page .schools.button strong {
	color: #ffffff !important;
}

*/