/*
Theme Name: CfPCR
Theme URI: Arch
Author: Arch
Author URI: archcreative.co.uk
Description: 
Version: 1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 
Text Domain: 
*/

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

:root{
	--pink:#E00086;
	--blue:#29235C;
	--grey:#F4F4F4;
	--sidePadding:2rem;
}


/* ===== GENERAL ===== */

html, body { width:100%;margin:0;padding:0;overflow-x:hidden;color:var(--blue);font-family: "Manrope", sans-serif; }
* { box-sizing:border-box; }
img { display:block; }

.container { width:100%;max-width:calc(1400px + calc(var(--sidePadding) * 2));padding:0 var(--sidePadding);margin:0 auto; }
.pos-rel { position:relative; }

.bg-pink { background:var(--pink);color:#fff; }
.bg-blue { background:var(--blue);color:#fff; }

a.button { text-transform:uppercase;font-weight:700;display:inline-block;padding:0.6rem 1.5rem;color:#fff;background:var(--pink);text-decoration:none;border-radius:10rem; }

h1,h2,h3,h4,h5,h6 { color:var(--blue); }
h1 { font-size:4rem;font-weight:400;line-height:4.625rem; }
h2, h3 { font-size:2.5rem;font-weight:500;line-height:2.5rem;letter-spacing:0.125rem }
h4 { font-size:1.5rem;color:var(--pink);font-weight:600;}


.bg-blue :is(h1,h2,h3,h4,h5,h6) { color:#fff; }
.bg-pink :is(h1,h2,h3,h4,h5,h6) { color:#fff; }
.bg-white :is(h1,h2) { color:var(--pink); }
.bg-grey { background:var(--grey); }

p { font-size:1.125rem;line-height:1.57rem; }

/* ===== NAV MENU ===== */
.top-bar { padding:1rem 0; }
a.logo { display:inline-block; }
a.logo img { width:100%; }
nav { padding:2rem 0; }
.nav-flex { display:flex;justify-content:space-between;align-items:center; }
#navmenu { width:auto; }
#navmenu .menu { display:flex;list-style: none;padding:0;margin:0;width:100%;z-index:100;position:relative; }
#navmenu .menu li { text-align:center;padding:10px;position:relative; }
#navmenu .menu a { text-decoration:none;text-transform:uppercase;color:var(--blue);font-weight:700; }
#navmenu .menu a:hover { color:var(--pink); }
#navmenu .sub-menu { display:none;position:absolute;width:100%;top:100%;left:0;background:#fff;list-style: none;padding:0;margin:0; }
#navmenu .sub-menu li { display:inline-block;width:100%; }
#navmenu .menu li:hover .sub-menu { display:inline-block; }

.mobile-toggle { width:30px;height:30px;display:none; }
.toggle-bar { width:100%;height:3px;margin-bottom:5px;background:var(--blue); }
.mobile-toggle:hover .toggle-bar,
.mobile-toggle.active .toggle-bar { background:var(--pink); }

footer { padding:2rem 0 5rem; }
footer span { text-transform:uppercase;font-weight:700; }
footer .socials { display:flex;gap:1rem;width:100%; }
footer .socials a:hover { opacity:0.5; }
footer .menu { list-style: none;padding:0;margin:0;line-height:180%; }
footer .menu a { text-decoration:none;color:#fff; }
footer .menu a:hover { color:var(--pink); }
.footer-flex { display:flex; }
.footer-flex > div { flex:1 1 50%;display:flex;align-content:space-between;flex-wrap:wrap; }
.footer-col-2 { display:flex;gap:2rem;justify-content:space-between; }
a.button.back-to-top { background:#fff;color:var(--blue);display:inline-flex;align-items:center;gap:0.5rem; }
a.button.back-to-top:hover { background:rgba(255,255,255,0.5); }
a.button.back-to-top::after { display:inline-block;width:20px;height:20px;content:"";background:url("/wp-content/themes/cfpcr/img/arrow-up.svg") no-repeat center;backround-size:contain; }

 

/* ===== MODULES ===== */
.module { display:block;padding:1rem 0; }

/* Banner */
.banner { display:flex;margin-bottom:-1rem;flex-wrap:wrap; }
.banner > div { flex:1 1 50%; }
.banner-logo { width:100%;aspect-ratio:2/1.3;object-fit:cover;object-position:top; }
.banner-text { width:100%;max-width:680px;padding:2rem 0 4rem; }
.banner.home .banner-text { max-width:520px; }
.banner-text p  { max-width:565px; }
.banner-image { align-content:end;flex:1 1 250px; }

.home-box-links { display:flex;gap:2rem; }
.home-box-link { width:100%;border-radius:2rem;overflow:hidden;position:relative;text-decoration:none;color:#fff; }
.home-box-link::after { content:"";width:calc(100% - 2rem);height:calc(100% - 2rem);top:1rem;left:1rem; border:1px solid #fff;border-radius:2rem;position:absolute;}
.home-box-link-img { width:100%; }
.home-box-text img { display:inline-block; }
.home-box-text { text-align:center;padding:2rem 1rem 3rem; }

.centred-columns { padding:4rem 0;display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-evenly;align-items:center; }
.centered-column-text { width:100%;max-width:444px; }
.centered-column-image { text-align:center; }
.centered-column-image span { font-size:1.5rem;display:inline-block;margin-top:1rem; }

.two-column { display:flex;gap:2rem;align-items:center; }
.two-column-text { width:100%;max-width:444px; }
.two-column-img img { width:100%;margin:-1rem 0 -1rem; }
.two-column > div { flex:1 1 50%; }

.two_column-flex { display:flex;flex-wrap:wrap;column-gap:2rem;align-items:center; }
.two_column-flex .two_column-text { flex:1 1 57%;min-width:300px; }
.two_column-flex .two_column-img { flex:1 1 calc(43% - 2rem);align-self:stretch; } 
.two_column-flex .two_column-img img { width:calc(100% + 4rem);margin-left:-2rem;height:100%;object-fit:cover; }
.two_column-text { padding:4rem 2rem;max-width:750px; }

.partners { text-align:center;padding:3rem 0 4rem; }
.partners-grid { align-items:center;display:flex;gap:1rem;width:100%;flex-wrap:wrap;justify-content:space-between; }
.partners-grid img { width:100%;height:auto; }

.module.intro { padding:3rem 0 5rem; }
.module.intro p { font-size:1.5rem;line-height:2.125rem;color:var(--pink); }
.intro-flex { display:flex;flex-wrap:wrap;column-gap:2rem;row-gap:1rem; }
.intro-flex > div { flex:1 1 280px; }
.intro-flex img { width:100%; }

.module.icons { padding:3rem 0; }
.icon-grid { display:flex;flex-wrap:wrap;gap:2rem; }
.icon-grid > div { flex:1 1 200px;text-align:center; }
.icon-grid img { width:130px;height:130px;object-fit:contain;margin:0 auto 2rem; }

.module.team { padding:6rem 0; }
.team-flex { display:flex;column-gap:2rem;row-gap:3rem;flex-wrap:wrap;justify-content:space-between; }
.team-member { text-align:left; }
.team-member span { font-weight:700;font-size:1.125rem;color:var(--blue);display:block;margin:1rem 0 0rem; }
.team-member a { letter-spacing:0.05rem;color:var(--pink);text-decoration:none;font-weight:700;text-transform:uppercase; }
.team-member-img { aspect-ratio:32/38;background:var(--pink);width:320px;border-radius:3rem; }
.team-logo { width:100%;padding:0rem 2rem 2rem; }
.team-logo img { margin:0 auto; }
.team-section { padding:4rem 0 4rem;border-top:1px solid var(--blue);margin-top:2rem; }
.team-section:first-child { margin-top:0;border-top:0;padding-top:0; }

.team-banner { padding:3rem 0; }
.team-banner h1 { text-wrap:balance; }
.breadcrumbs { color:var(--pink);font-weight:700;margin-bottom:0rem; }
.breadcrumbs a { text-decoration:none;color:var(--pink); }
.breadcrumbs a:hover { color:var(--blue); }
.team-banner-role { color:var(--pink);font-size:1.5rem;text-wrap:balance;margin-top:-1rem;display:inline-block; }
.team-banner-text { width:100%;max-width:600px; }
.breadcrumbs span { color:var(--blue);font-weight:400 }
.breadcrumbs .category { text-transform:uppercase;color:var(--pink);font-weight:700; }

.team-profile { width:100%;max-width:680px;text-wrap:balance; }
.team-profile :is(b, strong) { color:var(--pink);font-weight:600; }

.team-member-section { padding:0rem 0 1rem;border-top:1px solid var(--blue);position:relative; }
.team-member-section h4 { padding-right:50px; }
.section-toggle { top:2rem;right:1rem;position:absolute;display:block;width:30px;height:30px;background:url("/wp-content/themes/cfpcr/img/arrow-down.svg") no-repeat center;background-size:contain; }
.open .section-toggle { background:url("/wp-content/themes/cfpcr/img/arrow-up.svg") no-repeat center;background-size:contain; }
.team-member-section-text { display:none; }
.open .team-member-section-text { display:block; }

.team-profile-image { border-radius:6rem;max-width:560px;aspect-ratio:1/1;overflow:hidden;position:absolute;top:0;right:2rem;width:calc(100% - calc(680px + 4rem));transform:translateY(-75%); }
.team-profile-image img { width:100%;height:100%;object-fit:cover; }

.module.grey_grid { padding:4rem 0; }
.grey-grid { display:flex;flex-wrap:wrap;gap:2rem; }
.grey-grid > div { flex:1 1 600px; }
.grey-text-col { background:var(--grey);border-radius:2rem;padding:3rem 4rem; }
.grey-grid-img { width:100%;border-radius:2rem;height:100%;object-fit:cover; }
.grey-grid-column { display:flex;flex-wrap:wrap;gap:1rem;align-content:stretch; }

.research-banner { padding:1rem 0 2.5rem; }
.research-grid { padding:3rem 0 ;display:flex;flex-wrap:wrap;column-gap:2rem;row-gap:4rem; }
.research-grid > div { flex:1 1 440px; }
.research-grid img { aspect-ratio:1/1;border-radius:3rem;width:100%;max-width:440px; }
.research-details { font-size:1rem;font-weight:500;margin:1rem 0; }
.research-details .category { color:var(--pink);text-transform:uppercase;font-size:1.125rem;font-weight:800; }
.research-title { font-size:1.5rem;color:var(--blue);font-weight:600;line-height:1.75rem;text-decoration:none; }

.archive-latest { padding:5rem 0 5rem; }
.latest-news { display:flex;flex-wrap:wrap;gap:2rem;row-gap:3rem; }
.latest-news > div { flex:1 1 500px; }
.latest-news-text { display:flex;align-content:space-between;flex-wrap:wrap;row-gap:clamp(2rem,5vw,6rem); }
.latest-news .research-title { font-size:2.5rem;line-height:normal;font-weight:500;color:#fff;margin-bottom:2rem;display:inline-block; }
.latest-news h2 { text-transform:uppercase; }
.latest-news .research-details .category { color:#fff; }
.latest-news img { width:100%;height:100%;object-fit:cover;border-radius:3rem; }

.latest-news a.button { background:var(--blue);border:1px solid var(--pink); }
.latest-news a.button::after { margin-left:1rem;transform:rotate(-90deg);position:relative;top:3px;content:"";display:inline-block;width:20px;height:20px;background:url("/wp-content/themes/cfpcr/img/arrow-white.svg") no-repeat;background-size:contain; }

.pagination { text-align:center;padding:1rem 0 3rem; }
.pagination :is(span,a) { text-decoration:none;background:var(--pink);color:#fff;padding:5px 15px;border-radius:10px; }
.pagination span, .pagination a:hover { background:var(--blue); }
 

@media(max-width:1100px){
	a.logo { width:250px; }
	.team-profile-image { transform:translateY(-100%);width:calc(100% - calc(600px + 4rem)); }

}
 
@media(max-width:991px){
	.team-profile-image { transform:none;width:100%;position:static;max-width:400px; }
}

/* Tablet Size */
@media(max-width:768px){
	/* Move this to it's own query if it needs to break down earlier */

		.nav-flex { display:block;position:relative; }
		#navmenu .menu { display:block;padding:1rem 0; }
		.mobile-toggle { display:inline-block;position:absolute;top:1rem;right:var(--sidePadding); }
		#navmenu { display:none; }
		#navmenu .menu li { display:inline-block;width:100%;padding:0; }
		#navmenu .menu a { display:inline-block;width:100%;padding:10px; }
		#navmenu .sub-menu { display: none;width:100%;position:static; }
		#navmenu .menu li:hover .sub-menu { display:none; }
	/* ---------------------- */
	.footer-flex { flex-wrap: wrap;gap:2rem; }
	footer .socials { margin-top:2rem; }

}

/* Mobile Size */
@media(max-width:620px){
	.home-box-links { flex-wrap:wrap; }
	.home-box-link-img { min-width:300px; }
}