/**
 Theme Name: COStheme2025
 Author: Dewi Williams
 Template: twentytwentyfive
 Version: 1.0
 */

h1, h2, h3, h4, h5, h6 {
	color: var(--wp--preset--color--contrast) ;
}

/* Base layout: 4 columns */
.custom-columns {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Base layout: 3 columns */
@media (max-width: 1280px) {
	.custom-columns {
	  display: grid !important;
	  grid-template-columns: repeat(3, 1fr);
	}
}

/* Tablet: 2 columns */
@media (max-width: 1024px) {
  .custom-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: 1 column */
@media (max-width: 600px) {
  .custom-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
	.wp-block-post-content.has-global-padding {
		padding-right: var(--wp--preset--spacing--30);
    	padding-left: var(--wp--preset--spacing--30);
	}
}

/**/
/*HIDE ON MOBILE*/
@media (max-width: 780px) {
	.hide-mobile {
		display: none;
	}
}

/**/
/* @media (max-width: 595px) {
	.COS-logo {
		width: 120px;
	}
} */

/********************************/
/*Responsive navigation*/
/********************************/


/* 1 - hide labels for language switcher */
 /* (see poly lang section at the end of the file) */


/* 2 - small text for navigation labels and reduce logo to 120px */

@media (max-width: 952px) {
	.wp-block-navigation__container {
		font-size: var(--wp--preset--font-size--small);
	}
	.COS-logo {
		width:120px;
	}
}

/* 3 - reduce logo width to 98px*/
@media (max-width: 902px) {
	.COS-logo {
		width:89px;
	}
}

/* 4 - change styling burger menu on tablet (ipad - portrait) */
@media (max-width: 768px) {
	/* do what is-mobile is doing */
	.COS-logo {
		width:120px;
	}
	.wp-block-navigation__container {
        font-size: var(--wp--preset--font-size--medium);
    }
		.wp-site-blocks {
		margin-top: var(--wp--preset--spacing--20);
	}
	
	/* show burger menu on tablet 768px (ipad - portrait) */
	
	
  /* hamburger button */
  .wp-block-navigation__responsive-container-open  {
    display: block !important;
  }

  /* full menu */
  .wp-block-navigation__responsive-container:not(.is-menu-open.has-modal-open) {
    display: none !important;
  }
}

/* hide burger for widths bigger than tablet*/
@media (min-width: 769px) { 
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none;
    }
}

/* mobile navigation */
.wp-block-navigation__responsive-container {
	box-sizing: border-box;
	background-color:  var(--wp--preset--color--base) !important;
	padding: 2em !important;
}
.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content>ul ui {
	border-bottom: 1px solid #aaa;
}

/********************************/
/* end of responsive navigation */
/********************************/

.wp-block-navigation__responsive-container .wp-block-navigation.items-justified-right {
	--navigation-layout-justification-setting: flex-start;
    --navigation-layout-justify: flex-start;
}

.wp-block-navigation__container.is-responsive.wp-block-navigation {
	line-height: 2em;
}
/*  was added to fix side scroll used by language switcher breaking out of the container
.navigation {
	overflow-x: hidden;
} */

/*team photos*/
.team {
	grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
}

@media (max-width: 540px) {
	.team {
		grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr));
	}
}

 /* header */
 header {
  position: relative;
  z-index: 10;
 }

.wp-block-cover {
	padding-bottom: 0;
	min-height: unset;
}

.wp-block-cover-with-video {
  height: 560px;
  margin-top:-120px;
}

.wp-block-cover-tall {
  height: 300px;
  margin-top:-120px;
}

.wp-block-cover-short {
  height: 240px;
  min-height: unset;
  margin-top:-120px;
  align-items: end;
}

.wp-block-cover-profile {
  margin-top:-120px;
  height: 120px;
  align-items: end;
}

.wp-block-cover__inner-container {
    align-self: end;
    box-sizing: border-box;
    padding-left: var(--wp--style--root--padding-left);
    padding-right: var(--wp--style--root--padding-right);
}

.wp-block-cover__inner-container p {
	margin:0;
}

/* css gradient for the header image */

.wp-block-cover .has-background-dim:not([class*=-background-color]) {
	background-color: unset;
}

.wp-block-cover.abi .wp-block-cover__background {
	background-image: linear-gradient(to top, #FFDB01, transparent);
}

.wp-block-cover.donate .wp-block-cover__background {
	background-image: linear-gradient(to top, #3020BD, transparent);
}

.wp-block-cover.home .wp-block-cover__background {
	background-image: linear-gradient(to top, #c8009e, transparent);
}

.wp-block-cover.iaa .wp-block-cover__background {
	background-image: linear-gradient(to top, #385684, transparent);
}

.wp-block-cover.live-well .wp-block-cover__background {
	background-image: linear-gradient(to top, #87E93A, transparent);
}

.wp-block-cover.training .wp-block-cover__background {
	background-image: linear-gradient(to top, #266cb5, transparent);
}


.wp-block-cover.working-sense .wp-block-cover__background {
	background-image: linear-gradient(to top, #9edaff, transparent);
}


/* end of css gradient for the header image */

.curve {
  max-height: 160px;
  margin-block-start: 0;
  margin-block-end: 0;
/* 	position:relative; blurs the top edge to blend with the image above deeper blur colours the text too. CSS gradient might be better
	z-index: 1;
	box-shadow: 0 -16px 8px #266cb5; */
}

.curve figure {
  margin: 0;
}

.curve img {
    max-height:160px;
}

/* footer */
footer {
  background-color: var(--wp--preset--color--accent-3);
  color: var(--wp--preset--color--base);
}

.wp-block-navigation__container.is-vertical {
  max-width: 12rem;
}

.cos-address {
  font-size: var(--wp--preset--font-size--medium);
}

/********************************/
/*********** content ************/
/********************************/

section {
 padding: 3.2rem 1rem 1rem 1rem;
}

.information-box {
	width: 67%;
	box-sizing:border-box;
	min-width: 645px;
	margin: auto;
	padding: 2rem;
	border-radius: 0.5rem;
	box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.15);
}

.info-from-ceo, .mission-statement {
	padding: 2rem 4rem 0 4rem;
	width:100%;
}

@media (max-width: 880px) {
	section {
 		padding: 2rem 1rem 1rem 1rem; /* 0 padding lef and right breaks layout for partners and accreditation */
	}
	
	section.team {
		padding: 2rem 0 1rem 0;
	}
	
	section.need-for-working-sense {
		padding: 3rem 2rem 2rem 2rem;
	}

	.information-box, .info-from-ceo, .mission-statement  {
		padding: 2rem 2rem 0 2rem;
	}
}

@media (max-width: 806px) {
	.make-a-difference {
		padding:0;
	}
}

@media (max-width: 600px) {
	section {
		padding:0;
	}
	section.need-for-working-sense {
		padding: 3rem 2rem 2rem 2rem;
	}
	
	section.expression-of-interest {
		padding-top: 2rem;
	}
}

.content-page-heading {
  max-width: 25rem;
}

.content-page-heading-short {
  max-width: 40rem;
}

.team h3 {
	height: 48px;
	margin-bottom: var(--wp--preset--spacing--30);
}

.team p {
	margin-top: 0;
}

@media (max-width: 600px) {
	.team .wp-block-image {
		aspect-ratio: 1;
		height: 100%;
	}
}

/* blockquote used for testimonials */
blockquote.wp-block-quote {
  border-left: none !important;
  max-width: 720px !important;
  margin: var(--wp--preset--spacing--60) auto;
  padding: var(--wp--preset--spacing--30)  var(--wp--preset--spacing--70);
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.15);
  position: relative;
}

.testimonial-single {
  width: calc(100% - 8rem);
}

blockquote::before {
  content: "";
  background-image: url('../../uploads/2025/02/icon-quote-x1_5.png');
  background-size: cover;
  background-repeat: no-repeat;
  display: inline-block;
  width: var(--wp--preset--spacing--70);
  height: var(--wp--preset--spacing--70);
  position: Absolute;
  left: -1rem;
  top: -1rem;
}

/* details */
.faq-container {  
 background-color: var(--wp--preset--color--custom-yellow);
 padding: 2.5rem 2rem;
 border-radius: 1rem;
}

.faq-training {
  background-color: #266CB5; 
}

.faq-training h2 {
  color: #ffffff;
}

.faq-fields {
  max-width: var(--wp--style--global--content-size);
  display: grid;
  row-gap: 1rem;
  margin: 0 auto var(--wp--preset--spacing--50) auto;
}

/* Add a custom transition when opening/closing. */
.wp-block-details {
	transition: all 0.5s ease-in-out;
  background-color: #fff;
  border-radius: 0.5rem;
}

/* Add horizontal margin to nested blocks/elements. */
.wp-block-details > :where( :not( summary ) ) {
	margin-left: 2rem;
	margin-right: 2rem;
}

/* If open, add some bottom padding to avoid content butting against the bottom. */
.wp-block-details[open] {
	padding-bottom: 2rem;
}

/* Base `summary` element styling. */
.wp-block-details summary {
	transition: all 0.5s ease-in-out;
	box-sizing: border-box;
	padding: 1rem;
	font-weight: 600;
}

/* Change the background of the `summary` element based on state. */
.wp-block-details[open] summary,
.wp-block-details summary:hover,
.wp-block-details summary:focus {
	/* background: #e2e8f0; */
  outline: none;
}

/* negative margin so the navigation overlays the hero image */
.wp-block-post-content.entry-content {
 margin-top: -120px; 
}

.page-id-2006 .wp-block-post-content.entry-content { /* remove negative margin on Cart*/
 margin-top: 0; 
}

.profile .wp-block-post-content.entry-content {
 margin-top: 0; 
} 

.single-post .wp-block-post-content.entry-content { /* remove negative margin on blog posts*/
 margin-top: 0; 
} 

.card {
  background-color: #ffffff;
  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.15); 
  border-radius: 1rem;
	padding-bottom: var(--wp--preset--spacing--30);
}

.card h3 {
	margin-bottom: var(--wp--preset--spacing--20);
	padding: 0 var(--wp--preset--spacing--30);
	min-height: 48.31px;
}

.card-text-only {
	padding: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--30);
}

.card p {
	margin-top: 0;
	padding: 0 var(--wp--preset--spacing--30);
}

/***** home page *****/

.page-heading h1 {
  max-width: 32rem;
}

.page-id-195 .page-heading h1 { /***** working sense page *****/
  max-width: none;
}

.page-id-156 .page-heading h1 { /* which page *****/
  max-width: 40rem;
}

/* post carousel on home page */

/* see Smart Slider plugin for setting margins, full width and fonts etc */
.n2-section-smartslider {
	display: none !important;
}

@media (max-width: 720px) { 

	.n2-section-smartslider {
		display: block !important;
		margin-bottom: 3em;
	}
	.desktop-grid {
		display: none;
	}
}
/* end of post carousel*/

.books {
	background-color: #77DA64;
}

.wp-block-latest-posts__post-title {
	font-family: var(--wp--preset--font-family--noto-sans);
    font-size: var(--wp--preset--font-size--large);
    font-weight: 700;
    letter-spacing: -0.1px; 
}

/* .is-layout-constrained .page-heading {
  margin-left: 2rem !important;
  margin-right: 2rem !important;
} */

:where(.wp-site-blocks) > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

.ticker-tape-container {
	overflow-x: hidden;
	width: 100%;
	display: flex;
}

.ticker-tape, .ticker-tape .block-columns {
	width: 3100px; /* previously 200% but design breaks on narrower screen widths */
	/*display: flex;
    align-items: center;
    flex: 0 0 auto;*/
}

.ticker-tape-live-well, .ticker-tape-live-well .block-columns {
	width: 1340px;
}

.ticker-tape.ticker-tape-left, .ticker-tape.ticker-tape-right {
	margin: auto var(--wp--preset--spacing--30);
}

.ticker-tape .wp-block-column {
	min-width: 240px;
}


.ticker-tape-left .wp-block-image img, .ticker-tape-left .wp-block-right img, .partners img  {
	max-width: none;
	width: 240px;
}

@keyframes marquee-right {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

.ticker-tape-right {
    animation-name: marquee-right;
    animation-duration: 80s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-play-state: running;
    animation-direction: normal;
}

@keyframes marquee-left {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0%);
    }
}

.ticker-tape-left {
    animation-name: marquee-left;
    animation-duration: 80s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-play-state: running;
    animation-direction: normal;
}

@media (max-width: 782px) {
	.ticker-tape .wp-block-columns, .ticker-tape.wp-block-columns, .partners .wp-block-columns {
		flex-wrap: nowrap !important;
	}
	.ticker-tape .wp-block-column, .partners .wp-block-column {
		min-width: 200px;
	}
	.ticker-tape-left .wp-block-image img, .ticker-tape-left .wp-block-right img, .partners .wp-block-column img {
		width:200px;
	}
}

@media (max-width: 600px) {
	.ticker-tape .wp-block-column, .partners .wp-block-column {
		min-width: 90px;
	}
	.ticker-tape-left .wp-block-image img, .ticker-tape-left .wp-block-right img {
		width: 90px;
	} 
	
	.partners .wp-block-column img {
		width: 100%;
	}
	
}

/*information-box*/
@media (max-width: 806px) {
	.information-box, .mission-statement {
		width: 100%;
		min-width:unset;
		padding: 2rem 1rem 0 1rem;
		gap: 0;		
	}
}

@media (max-width: 782px) {
	.mission-statement {
		padding: 2rem 0 0 0;
	}
	
	.information-box .wp-block-columns, .mission-statement .wp-block-columns  {
		gap: 0;
	}
	
	.information-box, .mission-statement .wp-block-group {
		border-radius: 0 !important;
		box-shadow: none !important;
		padding-top: 0 !important;
	}
	
	.mission-statement .wp-block-image img {
		max-width: 67%;
		float: right;
	}
	
	.info-from-ceo .text {
		max-width: 66%;
	}
	
	.info-from-ceo .image {
		max-width: 33%;
	}
	
	.advocacy {
		padding-top: 0;
	}
	
	.advocacy .wp-block-group {
		padding-top: 2rem;
	}
}

@media (max-width: 600px) {
	.info-from-ceo, .mission-statement {
		padding: 0;
	}
	
	.info-from-ceo .text, .mission-statement .text {
		max-width: 100%;
	}
	
	.info-from-ceo .image, .mission-statement .image {
		display: none;
	}

}

span.wpforms-currency-symbol {
	font-weight: 700;
	display: block;
}

/* Abi Project */
.books-available .wp-block-cover__inner-container {
	align-self: center;
}

.schools .wp-block-columns {
	overflow: hidden;
}

.schools .wp-block-column {
	min-width: 80px;
}
.wp-block-cover.shop-now-tile {
	padding: 3em 2em 2em 2em;
}

@media (max-width: 782px) {
	.FAQ {
		margin-right: calc(var(--wp--style--root--padding-right) * -1) !important;
		margin-left: calc(var(--wp--style--root--padding-left) * -1) !important;
		padding: 3.2rem 0 0 0;
	}
	
	.FAQ .faq-container {
		border-radius: 0;
	}
}

/* Live well */
.equipment {
	background-color: rgb(99,199,20);
	padding-bottom: 4rem;
	margin-block-start: 0;
}

section.equipment {
	padding: 3.2rem 2em 2em 2em;
}

/* About us */
.map-container {
  width:100%;
  height: 560px;
  border-radius: 0.5rem;
}

/* Donate Page */
.wpforms-image-choices-item {
	background-color:var(--wp--preset--color--custom-cos-blue);
	border-radius: 8px;
}

.wpforms-container.inline-fields .wpforms-field-container {
	display: block;
}

.wpforms-field.wpforms-field-payment-total {
	font-size: var(--wp--preset--font-size--large);
}

.wpforms-container .wpforms-field.wpforms-field-payment-total {
	float:left;
	clear:both;
}

.wpforms-container .wpforms-image-choices-modern .wpforms-image-choices-image img {
	max-width: 20em;
	max-height: 16em;
}

.wpforms-container.inline-fields .wpforms-form {
	display:block;
}

span.wpforms-image-choices-label {
	max-width: 20em;
	box-sizing: border-box
    display: block;
    color: var(--wp--preset--color--base) !important;
    margin-top: 12px;
    background-color: var(--wp--preset--color--custom-cos-blue);
    padding: 1em 2em;
    border-radius: 0.5em;
}

/* Working Sense */
.information-working-sense {
	margin-top: var(--wp--preset--spacing--50);
    position: relative;
    background-color: #ffffff;
}

.faq-working-sense {
  background: none;
 padding: 0 2rem 2.5rem 2rem;
 border-radius: 1rem;
}

.need-for-working-sense {
  background-color: #9edaff;
  padding-bottom: var(--wp--preset--spacing--50);
}

.need-for-working-sense .card {
	padding-bottom: 0;
}

.need-for-working-sense img {
	border-top-left-radius: 16px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 0px;
}

@media (max-width: 781px) {
	.need-for-working-sense img {
		border-top-left-radius: 16px;
    	border-top-right-radius: 16px;
    	border-bottom-left-radius: 0px;
    	border-bottom-right-radius: 0px;
	}
	
	.need-for-working-sense .card {
		padding-bottom: var(--wp--preset--spacing--50);
	}
	
	.partners .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
        flex-basis: 45% !important;
    }
}

.expression-of-interest, .get-support {
  margin-block-start: 0;
  padding-bottom: 3.2rem;
  background-image:
  url("../../uploads/2025/02/Expression-of-interest-background-1024x539.png");
}

.form-container {
  padding: 2rem;
}

.wp-block-image.bottom-curve, .wp-block-image.bottom-curve {
  margin-block-start: 0rem;
}

.crown-logo {
  max-width: 418px;
}

/* pink boxes*/
@media (max-width: 1750px) {
	div.callout-pink {
		grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
	}
}

@media (max-width: 1480px) {
	div.callout-pink {
		grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
	}
}

@media (max-width: 1348px) {
	div.callout-pink {
		grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
	}
}



@media (max-width: 1188px) {
	div.callout-pink {
		grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
	}
}

@media (max-width: 600px) {
	.callout-pink {
		gap: 2px !important;
	}
}

/* blue boxes */

@media (max-width: 1293px) {
	div.callout-blue {
		grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
	}
}

@media (max-width: 1164px) {
	div.callout-blue {
		grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
	}
}

@media (max-width: 1088px) {
	div.callout-blue {
		grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
	}
}

@media (max-width: 768px) {
	div.callout-blue {
		grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
	}
}

@media (max-width: 600px) {
	.callout-blue {
		gap: 2px !important;
	}
}

/*  client */
.client>.wp-block-image {
    align-content: center;
    min-height: 12rem;
}

.accreditation-membership .wp-block-heading, .partners .wp-block-heading {
    padding-left: var(--wp--preset--spacing--30) !important;
    padding-right: var(--wp--preset--spacing--30) !important;
}

/* Polylang */

/* .woocommerce-uses-block-theme .widget_polylang {
    color: var(--wp--preset--color--black);
} */

.widget_polylang, .widget_polylang .lang-item {
	width:120px;
}

.widget_polylang .lang-item img {
	width: 25px !important;
	height: 17px !important;
}

.widget_polylang>ul {
    list-style-type: none;
}

.widget_polylang>ul a {
    text-decoration: none;
}

.white .widget_polylang span {
    color: var(--wp--preset--color--base);
}

.black .widget_polylang span {
    color: var(--wp--preset--color--contrast);
}

@media (max-width: 1024px) {
	.widget_polylang, .widget_polylang .lang-item {
		width: auto;
	}
	.widget_polylang span {
		display:none;
	}
}



/* Woocommerce */
.black .wc-block-mini-cart__button span, .black .wp-block-woocommerce-customer-account {
	color: var(--wp--preset--color--contrast) !important;
}

.white .wc-block-mini-cart__button span, .white .wp-block-woocommerce-customer-account {
	color: var(--wp--preset--color--base) !important;
} 

.product-title {
	min-height: 44px;
}