/*  USER.CSS Customised site-specific CSS rules:  these rules override the style settings used by other CSS files loaded by this website. */
/*  First add two additional fonts, Merriweather for the bulf of the text, Fira Sans for headers. */
@font-face {
    font-family: 'Merriweather 24pt';
    src: url('../fonts/merriweather/Merriweather24pt-Bold.woff2') format('woff2'),
        url('../fonts/merriweather/Merriweather24pt-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Merriweather 24pt';
    src: url('../fonts/merriweather/Merriweather24pt-Medium.woff2') format('woff2'),
        url('../fonts/merriweather/Merriweather24pt-Medium.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Merriweather 24pt';
    src: url('../fonts/merriweather/Merriweather24pt-Regular.woff2') format('woff2'),
        url('../fonts/merriweather/Merriweather24pt-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fira_Sans';
    src: url('../fonts/fira_sans/FiraSans-Light.woff2') format('woff2'),
        url('../fonts/fira_sans/FiraSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fira_Sans';
    src: url('../fonts/fira_sans/FiraSans-Regular.woff2') format('woff2'),
        url('../fonts/fira_sans/FiraSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fira_Sans';
    src: url('../fonts/fira_sans/FiraSans-Bold.woff2') format('woff2'),
        url('../fonts/fira_sans/FiraSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fira_Sans';
    src: url('../fonts/fira_sans/FiraSans-SemiBold.woff2') format('woff2'),
        url('../fonts/fira_sans/FiraSans-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
 /* display fonts */
h1 { font-family: 'Fira_Sans', helvetica, sans-serif;
    font-weight: 300;
    font-size: 3em;}
h2 { font-family: 'Fira_Sans', helvetica, sans-serif;
    font-weight: 300;
    font-size: 2.5em;}
h3 { font-family: 'Fira_Sans', helvetica, sans-serif;
    font-weight: 300;
    font-size: 2em;}
h4 { font-family: 'Fira_Sans', helvetica, sans-serif;
    font-weight: 300;
    font-size: 1.5em;}
/* body {
    font-family: 'Merriweather 24pt', georgia, serif;
    font-weight: normal;
} TRY WITHOUT THIS PART. */
p { 
    font-family: 'Merriweather 24pt', georgia, serif;
    font-weight: 400;
    font-size: 1.1rem;
}

/*  Set up the OC colourts */
:root {
  --oc-blue-l: #8190C0;
  --oc-blue-m: #576BAB;
  --oc-blue-d: #2F4797;
  --oc-red-l: #F1A5B5;
  --oc-red-m: #E66587;
  --oc-red-d: #DE3360;
  --oc-green-l: #C5F2DD;
  --oc-green-m: #98E7C3;
  --oc-green-d: #65DAA5;
  --oc-text-l: #F5F2ED;
  --oc-text-d: #686D76;
  --oc-text-m: #FFD479;
  --info: var(--oc-green-d);
  --card-cap-padding-x: 1rem;
  /* line above lifts the card foot up from the bottom a bit more. Was .5rem. */
}
/* OC BACKGROUND colors defined here.*/
.oc-bg-blue-d{
	background-color: var(--oc-blue-d);
}
.oc-bg-blue-m{
	background-color: var(--oc-blue-m);
}
.oc-bg-blue-l{
	background-color: var(--oc-blue-l);
}
.oc-bg-green-d{
	background-color: var(--oc-green-d);
}
.oc-bg-green-m{
	background-color: var(--oc-green-m);
}
.oc-bg-green-l{
	background-color: var(--oc-green-l);
}
.oc-bg-red-d{
	background-color: var(--oc-red-d);
}
.oc-bg-red-m{
	background-color: var(--oc-red-m);
}
.oc-bg-red-l{
	background-color: var(--oc-red-l);
}
/* OC TEXT colors defined here.*/
.oc-text-l{
	color: var(--oc-text-l);
}
.oc-text-d{
	color: var(--oc-text-d):
}
.oc-text-m{
	color: var(--oc-text-m);
}

/* The next section changes the header color to white from casseiopia 
   primary. It also removed the image line which was a gradient.   z-index: 10; */
.container-header {
  background-color: #ffffff;
  background-image: none;
  position: relative;
  /* box-shadow: inset 0 5px 5px #00000008; */
}
/* This changesthe color of the text in a menu. The
rest of the style is left unchanged. Original in the
template CSS file.
*/
.container-header .mod-menu {
  color: var(--oc-blue-d);
}
.container-header .navbar-toggler {
  border:1px solid #000;
  color:#000   ;
  cursor:pointer ;
}
.metismenu.mod-menu {
    color: var(--oc-blue-d);
}
.mod-list li a {
    color: var(--oc-blue-d);
}
[class*="icon-menu"], [class^=icon-menu] {
    color: var(--oc-blue-d);
}

/* Section keeps header shallow height by making the logo & nav same line */
.container-header {
  display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "top below" 
                         "logo logo"
                         "nav nav";
}
.container-header .container-topbar {
    padding: .5em;
}
.container-header .container-topbar {
    grid-area: top;
}
.container-header .container-below-top {
    grid-area: below;
    justify-content: flex-end;
}
.container-header .grid-child:has(.navbar-brand) {
    grid-area: logo;
}
.container-header .container-nav {
    grid-area: nav;
    justify-content: flex-end;
}
@media (width >= 991.98px) {
    .container-header {
        grid-template-columns: 
            [full-start] minmax(0,1fr) 
            [main-start] repeat(4,minmax(0,19.875rem))
            [main-end] minmax(0,1fr)[full-end];
        grid-template-areas: ". logo logo nav nav .";
        gap: 0 1rem;
    }
    .container-header:has(.container-below-top, .container-topbar) {
        grid-template-areas: ". top top below below ."
                             ". logo logo nav nav  .";
    }
}
.container-topbar {
      max-width: 1320px;
      margin-left: auto;
      margin-right: auto;
    }
.bluetitle .module_header h3 {
    color: var(--oc-blue-d);
}

/* FIRST style for cards about where oc ministers */
.oc-card-header{
	background-color: var(--oc-green-d);
	color: var(--oc-text-d);
	margin-top: 0.25rem; /* same as mt-1 */
	font-size: 1.5rem;
}

.oc-card-footer {
  padding: var(--card-cap-padding-y) var(--card-cap-padding-x);
  margin-bottom: 1.25rem;
  color: var(--oc-text-d);
  background-color: var(--oc-green-l);
  border-top: var(--card-border-width) solid var(--card-border-color);
}
/* SECOND style for cards about where oc ministers */
.oc-card-header2{
	background-color: var(--oc-blue-d);
	color: var(--oc-text-l);
	margin-top: 0.25rem; /* same as mt-1 */
	font-size: 1.25rem;
}

.oc-card-footer2 {
  padding: var(--card-cap-padding-y) var(--card-cap-padding-x);
  color: var(--oc-text-l);
  background-color: var(--oc-blue-l);
  border-top: var(--card-border-width) solid var(--card-border-color);
}

.boxed .blog-item {
  box-shadow: 0 0 2px #3339421a, 0 2px 5px #33394214, 0 5px 15px #33394214, inset 0 3px 0 var(--oc-green-d);
  background-color: #fff;
}

/* css to make FAQ accordion have color. */
/* Example 1 * THESE ARE DEFINING SOME COLORS */
.accordion {
  --accordion-color: #ffffff;
  --accordion-bg: #EE0000;
  --accordion-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, border-radius .15s ease;
  --accordion-border-color: #000000;
  --accordion-btn-color: #000000;
  --accordion-btn-bg: var(--accordion-bg);
  --accordion-active-color: #000000;
  --accordion-active-bg: lightblue;
}

.accordion {
  --accordion-btn-bg: var(--oc-text-l);
  /* --bs-accordion-active-bg: #ff5c8d; */
    --accordion-active-bg: var(--oc-blue-d);
  --accordion-active-color: var(--oc-text-m);
  --accordion-bg: white;
  --accordion-color: var(--oc-blue-d);
  --accordion-btn-focus-box-shadow: none;
}
.accordion-button:not(.collapsed) {
  box-shadow: none;
}
.accordion-header{
  color:white;
  font-size:2rem;
  
  
}

/* Example 2 

.accordion-flush.accordion {
  --bs-accordion-btn-bg: #ffffff;
  --bs-accordion-active-bg: mintcream;
  --bs-accordion-active-color: #000000;
  --bs-accordion-bg: mintcream;
  --bs-accordion-color: #000000;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-focus-border-color: unset;
}

.accordion-flush .accordion-button {
  border-top: 1px solid #000000;
}

.accordion-flush .accordion-item:last-child .accordion-button.collapsed,
.accordion-flush .accordion-item:last-child .accordion-body {
  border-bottom: 1px solid #000000;
} */

.accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
  transition: all 0.5s;
}
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
}

/* Added 24 June 2026, suggested by Claude AI */
/* Added 24 June 2026, suggested by Claude AI */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.35s; }
.delay-3 { transition-delay: 0.6s; }
.delay-4 { transition-delay: 0.85s; }

/* and this also for front page */
.hero-text-block {
  white-space: normal; /* default: allow wrapping on small screens */
  font-size: clamp(0.6rem, 1.5vw, 2.2rem);
}

@media (min-width: 700px) {
  .hero-text-block {
    white-space: nowrap; /* keep each line on one row once there's room */
  }
}
/* END Added 24 June 2026, suggested by Claude AI */
/* END Added 24 June 2026, suggested by Claude AI */

/* for the icons on the front page*/
.fp-icon {
	font-size: clamp(2rem, 6rem, 6rem);
	color: var(--oc-blue-d);	
}
/* END for the icons on the front page*/

/* For having multiple columns in the footer, including a menu */
.footer .grid-child {
flex-wrap: wrap;
}
@media (width <= 991.98px) {
.footer .grid-child {
flex-direction: unset;
}
.footer h3 {
font-size: 1.3rem;
}
}
.footer .grid-child {
align-items: flex-start;
row-gap: 2rem;
}
/* Make footer width the same as container-fluid */
footer .container {
    max-width: 100%;
    width: 100%;
}
/* Font sizes for the Giving page*/
.giving .h1 {
  font-family: 'Fira_Sans', helvetica, sans-serif;
    font-weight: 300;
    font-size: 3em;
}
.giving .p{
    font-family: 'Fira_Sans', helvetica, sans-serif;
    font-weight: 300;
    font-size: 2em;
  
}
.obannergm {
  font-size: clamp(1rem, 20vw, 3rem)
  background-color:var(--oc-green-m);
  height: 3rem;
  text-align: center;
  margin:auto;
  padding: 1rem;
}
.obannerbd {
  font-size: clamp(1rem, 20vw, 3rem)
  background-color:var(--oc-blue-d);
  height: 3rem;
  text-align: center;
  margin:auto;
  padding: 1rem;
}