/*
Theme Name: TRADE Sexual Health
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=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=Parkinsans:wght@300..800&display=swap');
:root{
	--pink-trade:#ff008c;
	--pink:#ff77bb;
	--pink-soft:#ffe0f9;
	--yellow:#ffcc33;
	--yellow-soft:#fff6d7;
	--orange:#FE8F20;
	--orange-soft:#ffe9d2;
	--green:#78eccc;
	--green-soft:#e3fcf5;
	--red:#7C132E;
	--purple:#8145E9;
	--purple-soft:#E6DAFC;
	--blue:#00ddff;
	--blue-soft:#ccf8ff;
	--black:#0C0C0C;
}


/* ===== GENERAL ===== */
* { box-sizing:border-box; }
html, body { width:100%;margin:0;padding:0;overflow-x:hidden;font-family: "Hanken Grotesk", sans-serif; }

.skip {  position: absolute;  left: -10000px;  top: auto;  width: 1px;  height: 1px;  overflow: hidden;}
.skip:focus {   position: static;  width: auto;  height: auto; }

.container { width:100%;max-width:1200px;margin:0 auto;padding:0 2.25rem; }
.container-small { width:100%;max-width:936px;margin:0 auto; }
.container-smallest { width:100%;max-width:760px;margin:0 auto; }
.container-row { margin-bottom:4rem; }
.container-row:last-child { margin-bottom:0 }

.pos-rel { position:relative; }
.pos-abs { position:absolute; }

h1,h2,h3,h4,h5,h6 { font-family: "Parkinsans", sans-serif; }
h1 { font-size:clamp(2rem,5vw,3rem);margin-top:0;line-height:110%; }
h2 { font-size:clamp(1.5rem,5vw,2rem);margin:0 0 0rem;line-height:125%; }
h3 { font-size:clamp(1.25rem,5vw,1.5rem);margin-top:0.5rem;margin-bottom:1rem; }
h4 { font-size:clamp(1.1rem,5vw,1.25rem);margin-top:0.5rem;margin-bottom:0; }
p,ul,ol { font-size:1rem;font-weight:400; }
:is(ul,ol) li { margin-bottom:0.5rem; }
h3.trustee-header { margin-bottom:-0.75rem;margin-top:2rem; }

.bg-pink-soft { background:var(--pink-soft); }
.bg-yellow-soft { background:var(--yellow-soft); }
.bg-orange-soft { background:var(--orange-soft); }
.bg-green-soft { background:var(--green-soft); }
.bg-purple-soft { background:var(--purple-soft); }
.bg-blue-soft { background:var(--blue-soft); }

a { color:var(--black);text-underline-offset:2px; }
a:hover { color:var(--red); }
a.button, input.button { background:var(--pink);border:2px solid var(--pink);padding:0.75rem 1rem;border-radius:0.5rem;font-weight:700;gap:0.5rem;line-height:150%;text-decoration:none;color:var(--black);display:inline-flex;align-items:center; }
a.button::after { width:24px;height:24px;content:"";display:inline-block;background:url("/wp-content/themes/trade/img/arrow-right.svg") no-repeat center;background-size:contain; }
a.button:hover, a.button:focus, input.button:hover { background:transparent; }


.bg-yellow-soft a.button { background:var(--yellow);border-color:var(--yellow); }
.bg-orange-soft a.button { background:var(--orange);border-color:var(--orange); }
.bg-green-soft a.button  { background:var(--green);border-color:var(--green); }
.bg-purple-soft a.button { background:var(--purple);border-color:var(--purple);color:#fff; }
.bg-blue-soft a.button   { background:var(--blue);border-color:var(--blue); }

.bg-purple-soft a.button::after { background:url("/wp-content/themes/trade/img/arrow-right-white.svg") no-repeat center;background-size:contain; }
.bg-purple-soft a.button:hover { color:var(--black); }
.bg-purple-soft a.button:hover::after,
.bg-purple-soft a.button:focus::after,
.bg-purple-soft a.button:active::after { background:url("/wp-content/themes/trade/img/arrow-right.svg") no-repeat center;background-size:contain; }

nav .logo img { width:160px;height:auto; }

:is(.bg-yellow-soft, .bg-orange-soft, .bg-green-soft, .bg-purple-soft, .bg-blue-soft) a.button:hover, a.button:focus { color:var(--black);background:transparent; }


/* ===== NAV MENU ===== */

.hide { transition:padding-right 0.5s ease-in-out;line-height:110%;display:flex;align-items:center;gap:1rem;font-size:1.25rem;font-weight:600;text-decoration:none;color:var(--black);position:fixed;z-index:10;bottom:26%;right:0;background:var(--pink);font-family:"Parkinsans";padding:1rem 1.5rem;border-top-left-radius:1rem;border-bottom-left-radius:1rem;border:2px solid var(--pink);border-right:none; }
.hide:hover { padding-right:3rem;color:var(--black);background:var(--pink-soft); }
.hide div { display:inline-block;max-width:94px; }
.hide::after { content:"";display:inline-block;width:24px;height:24px;background:url("/wp-content/themes/trade/img/hide.svg") no-repeat center;background-size:contain; }

nav { padding:1.5rem 0;position:relative;z-index:9 }
nav .nav-cover { display:none; }
.nav-flex { display:flex;justify-content:space-between;flex-wrap:wrap; }
#navmenu { align-self:end;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap; }
#navmenu .menu { list-style: none;padding:0;margin:0;display:flex;width:100%;gap:clamp(1rem, 3.2vw, 2rem);z-index:9; }
#navmenu ul { list-style:none;padding:0; }
#navmenu .menu > li { display:inline-block;margin:0; }
#navmenu .menu li a { color:var(--black);font-weight:700;text-decoration:none;display:flex;align-items:center; }
#navmenu .menu > li > :is(a:hover, a:active, a:focus),
#navmenu .menu > li.current_page_ancestor  > a { text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--pink-trade); }


/*#navmenu .sub-menu-wrapper > .sub-menu { display:flex;justify-content:space-between; }*/

 
#menu-nav-menu li.menu-item-has-children > a::after { transition:all 0.3s ease-in-out;margin-left:2px;display:inline-block;width:20px;height:20px;background:url("/wp-content/themes/trade/img/arrow-down.svg") no-repeat center;background-size:contain;content:""; }
#menu-nav-menu li.menu-item-has-children > a.open::after { transform:rotate(-180deg); }
/*#navmenu .menu-item-has-children:hover .sub-menu-wrapper { display:block; } */

#menu-nav-menu > li.menu-item-has-children { position:relative; }
.menu-item-has-children :is(.sub-menu-wrapper, .sub-sub-menu) { display:none; }
#navmenu .sub-menu-wrapper { position:absolute;width:228px;top:calc(100% + 20px);left:0;list-style: none;margin:0 auto; }
#navmenu .sub-menu-wrapper > .sub-menu { overflow:hidden;background:#fff;border-radius:1rem;box-shadow:0px 0px 8px rgba(0,0,0,0.1); }
#navmenu .sub-menu-wrapper::before { transform:scaleX(1.4);text-shadow:0px -3px 3px rgba(0, 0, 0, 0.1);position:absolute;top:-16px;left:1.5rem;content:"▲";color:#fff;display:block;width: 0px;height: 0px; }
#navmenu .sub-menu-wrapper > .sub-menu a { padding:1rem 1.5rem; }
#navmenu .sub-menu-wrapper .sub-sub-menu a { padding-left:3rem; }
#navmenu .sub-menu-wrapper > .sub-menu :is(a:hover, a:focus) { background:var(--pink-soft); }
#navmenu .sub-menu-wrapper li { display:block; }
/*.menu-item-has-children.open > .sub-menu-wrapper { display:block; }*/

/*.menu-item-has-children a:focus + .sub-menu-wrapper,
.menu-item-has-children:focus-within .sub-menu-wrapper { display:block; }

.sub-menu-wrapper .sub-menu .menu-item-has-children a:focus + .sub-sub-menu,
.sub-menu-wrapper .sub-menu .menu-item-has-children:focus-within .sub-sub-menu { display:block; }
.menu-item-has-children:focus-within > a::after,
.sub-menu-wrapper .sub-menu .menu-item-has-children a:active::after { transform:rotate(-180deg); }
*/

.mobile-toggle { display:none; }

#footermenu .menu { list-style: none;padding:0;margin:0; }
footer { padding:2.5rem 0; }
.footer { border-radius:1rem;padding:4rem 2.5rem 2rem; }
.footer :is(h3,h4) { color:var(--red); }
.footer-columns { display:flex;gap:1rem;width:100%;max-width:660px;margin-top:-5.6rem;flex-wrap:wrap; }
.footer-columns > div { flex:1 1 300px; }
.footer .logo { position:absolute;top:2.5rem;right:2rem;width:160px;height:auto; }
.footer .logo img { width:100%; }
footer .socials { width:100%;text-align:right;margin-top:2.5rem; }
footer .social { width:2rem;height:2rem;display:inline-block;margin-left:0.5rem; }
footer .social svg { width:100%;height:100%; }
footer .social svg :is(path) { fill:var(--pink-trade) }
footer .social:hover svg :is(path) { fill:var(--red); }
.newsletter { padding:2rem 2.5rem 2rem;border-radius:1rem;margin-bottom:2rem; }
.newsletter p { font-size:0.8rem; }
.newsletter input { padding:0.5rem 1rem;line-height:150%;font-weight:700;font-size:0.8rem;  }
.newsletter input[type="email"] { border-radius:0.5rem;border:2px solid #fff; }
fieldset { border:none;padding:0; }
.newsletter input.button { background:var(--orange);border-color:var(--orange); }
.newsletter input.button:hover { background:transparent;cursor:pointer; }

/* Base checkbox styling */
input.gdpr[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 32px;
  border: 2px solid var(--orange);
  border-radius: 0.5rem;
  background-color: white;
  cursor: pointer;
  vertical-align: middle;
  margin-right: 0.5rem;
}

/* Checked state */
input.gdpr[type="checkbox"]:checked {
  background-color: var(--orange);
}

/* Optional: align label text nicely */
label.checkbox.subfield {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
  font-family: sans-serif;
  font-size: 1rem;
}



.home_hero { padding:2.5rem 0; }
.home-hero { border-radius:1rem;display:flex;overflow:hidden; }
.home-hero-text { padding:5rem 4rem;flex:1 1 670px;align-self:center; }
.home-hero-image { flex:1 1 480px;position:relative;height:inherit; }
.home-hero img { height:100%;width:100%;object-fit:cover;object-position:center;position:absolute;top:0;right:0; }
.home-hero img.mobile { display:none; }

.home_blocks { padding:0 0 5rem; }
.home-blocks { display:flex;gap:1rem;flex-wrap:wrap; }
.home-block { border-radius:1rem;padding:2rem 2.5rem;flex:1 1 300px;display:flex;flex-wrap:wrap;align-content:start; }
.home-blocks.single-blocks .home-block { gap:1rem; }
.home-blocks.single-blocks { padding:clamp(1.5rem, 9vw, 2.5rem) 0; }
.home-block h2 { flex:1 1 100%; }

.home_events { padding:2.5rem 0; }
.home_events .block-slide { background:#fff;border:none; }

.upcoming-events-slider .block-slider { padding:0 0rem;position:relative; }
.upcoming-events-slider .block-slider::before { position:absolute;top:0;left:calc(100% + 5rem);height:100%;width:9999px;dsplay:block;background:var(--pink-soft);z-index:2;content:""; }
.upcoming-events-slider .block-slider::after { position:absolute;top:0;right:calc(100% + 5rem);height:100%;width:9999px;dsplay:block;background:var(--pink-soft);z-index:2;content:""; }
.find-more-events-slide { display:flex;align-content:space-between;border:1px solid var(--pink);padding:1rem;border-radius:1rem;height:100%;flex-wrap:wrap; }

.home_projects { padding:4rem 0; }
.home-projects { display:flex;gap:1.5rem;margin-top:2rem;flex-wrap:wrap; }
.home-project { border-radius:1rem;overflow:hidden;flex:1 1 330px; }
.home-project img { width:100%;aspect-ratio:3/2;object-fit:cover; }
.home-project-text { padding:1rem 2rem 2rem; }


/* ===== MODULES ===== */
.module { display:block; }

.module.hero { padding:clamp(3rem, 9vw, 7rem) 0 clamp(3rem, 9vw, 5rem); }
.hero-column { width:100%;display:flex;flex-wrap:wrap;gap:1rem;row-gap:2rem; }
.hero-column > div:first-child { flex:1 1 auto;max-width:648px; }
.hero-column > div:last-child { flex:0 1 250px; }
.hero img { max-height:250px;max-width:250px;margin-bottom:2rem; }

.full_width_image { padding:clamp(1rem, 9vw, 2.5rem) 0; }
.full_width_image img { width:100%;border-radius:1rem; }

.module.two_column_textimage .two-column-holder { margin:clamp(2rem, 9vw, 5rem) auto;padding-top:clamp(2rem, 9vw, 5rem);padding-bottom:clamp(2rem, 9vw, 5rem); }
.module.two_column_textimage .two-column-holder:not(.bg-white) { border-radius:1rem;padding-left:2.25rem;padding-right:2.25rem; }
.two-column-text-image { display:flex;gap:1.625rem;flex-wrap:wrap; }
.two-column-text-image > div { flex:1 1 455px; }
.two-column-text-image img { max-width:455px;width:100%;display:block;border-radius:1rem; }
.two-column-text-image .image-column img { margin-bottom:1rem; }
.img-left .two-column-text-image { flex-direction:row-reverse; }
.image-column iframe { width:100% !important;height:auto;aspect-ratio:16/9; }


.two_column_text { padding:clamp(1rem, 9vw, 4rem) 0; }
.two_column_text_blocks { padding:0 0; }
.two-column-text { display:flex;flex-wrap:wrap;gap:1.5rem; }
.two-column-text.resources{ padding:clamp(1rem, 9vw, 4rem) 0; }
.two-column-text > div { flex:1 1 360px; }
.two-column-text.block-left { flex-direction:row-reverse; }

.module.hiring { padding:2.5rem 0; }
.hiring-box { padding:1.5rem 2rem;border:2px solid var(--pink-trade);border-radius:1rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center; }
.hiring-text { font-family:Parkinsans;font-size:2rem;font-weight:700; }
.hiring-link { text-decoration:none;color:var(--black);display:inline-flex;align-items:center;gap:0.25rem; }
.hiring-link::after { content:"";width:20px;height:20px;display:inline-block;background:url("/wp-content/themes/trade/img/arrow-right.svg") no-repeat center;background-size:contain; }

.module.cta_blocks { padding:2.5rem 0; }
.cta-blocks { display:flex;gap:1.5rem;flex-wrap:wrap; }
.cta-block { padding:2rem 2.5rem;flex:1 1 550px;border-radius:1rem;display:flex;flex-wrap:wrap; }
.cta-block a.button { align-self:flex-end; }
.cta-header, .cta-block p { flex:1 1 100%; }

.module.slider { padding:5rem 0 2rem; }
.slick-list { overflow:visible; }
.block-slider { margin-top:1.5rem; }
.block-slide { border:2px solid var(--pink);border-radius:1rem;padding:2rem; }
.block-slide img { margin-bottom:1.5rem;width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center;border-radius:1rem; }
.block-slider .slick-track { align-items:stretch;display:flex; }
.block-slider .slick-slide { margin: 0 1rem;height:auto; }
.block-slider .slick-slide .block-slide, .slick-slide > div { height:100%; }
.block-slider .slick-list { margin: 0 -1rem; }
.slick-prev, .slick-next { position:static; }
.slick-prev:before, .slick-next:before { display:none; }
.slick-arrow { padding:1rem; }
.slick-arrow, .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { display:inline-block;transform:none;background:url("/wp-content/themes/trade/img/arrow-right.svg") no-repeat center;background-size:20px auto; }
.slick-prev, .slick-prev:hover, .slick-prev:focus { transform:scaleX(-1); }
.slider-arrows { text-align:right;margin-right:-1rem;padding-top:1rem;padding-right:0.5rem; }
.slick-arrow:hover { opacity:0.5; }
.slick-disabled { opacity:0.3;pointer-events:none; }
.slick-next .slick-next-icon:before,
.slick-prev .slick-prev-icon:before { display:none; }


.block-slider { padding:0 0rem;position:relative; }
.block-slider::before { position:absolute;top:0;left:calc(100% + 5rem);height:100%;width:9999px;dsplay:block;background:#ffffff;z-index:2;content:""; }
.block-slider::after { position:absolute;top:0;right:calc(100% + 5rem);height:100%;width:9999px;dsplay:block;background:#ffffff;z-index:2;content:""; }

.module.team { padding:clamp(2rem, 5vw, 5rem) 0; }
.team-grid { display:flex;flex-wrap:wrap;gap:1.5rem; }
.team-block { flex:1 1 360px;max-width:360px;border:2px solid var(--pink);border-radius:1rem;padding:2rem 2rem 3rem; }
.team-block img { aspect-ratio:1/1;width:100%;object-fit:cover;border-radius:1rem;margin-bottom:1rem; }
.team-name { display:block;width:100%;font-family:"Parkinsans";font-size:1.5rem;font-weight:700; }

a.purple-arrow-link { color:var(--purple);position:relative;text-underline-offset:5px;text-wrap:pretty; }
a.purple-arrow-link:hover { color:var(--black); }
a.black-arrow-link { color:var(--black);position:relative;text-underline-offset:5px;text-wrap:pretty; }
a.black-arrow-link.bold-arrow-link { font-weight:700;font-size:clamp(1rem, 3vw,1.5625rem);font-family:Parkinsans;text-decoration:none; }


a.black-arrow-link, a.purple-arrow-link { display:inline-block;padding-right:1.5rem;background:url("/wp-content/themes/trade/img/arrow-right.svg") no-repeat center right;background-size:20px auto;background-position:right center; }
a.purple-arrow-link { background:url("/wp-content/themes/trade/img/arrow-right-purple.svg") no-repeat center right;background-size:20px auto;background-position:right center; }

a.black-arrow-link:hover, a.black-arrow-link:active, a.black-arrow-link:focus { color:var(--red); }
a.black-arrow-link.bold-arrow-link::after { top:2px; }

.section-scrolls { padding:0 0 3rem; }
.scroll-button { border:1px solid var(--pink);border-radius:1rem;display:inline-block;text-decoration:none;padding:0.5rem 1rem;margin-bottom:0.5rem; }
.scroll-button:hover { background:var(--pink); }

.post-grid { display:flex;flex-wrap:wrap;gap:1.5rem; }
.post-grid-item { max-width:360px;display:flex;flex-wrap:wrap;flex:1 1 360px;align-content:flex-start;padding-top:1.75rem;position:relative; }
.post-grid-item h3 { flex:1 1 100%;margin-bottom:0; }
.post-grid-item img { width:100%;border-radius:1rem; }
.current-project-label { font-family: "Parkinsans", sans-serif;font-weight:700;padding-left:30px;background:url("/wp-content/themes/trade/img/star-pink.svg") no-repeat left center;background-size:20px;position: absolute;top:0px;left:0; }
.useful-resources { padding:1rem 2rem;border-radius:1rem; }


.module.quote { padding:clamp(2rem, 9vw, 5rem) 0; }
.quote-text { color:var(--red);font-family: Parkinsans;font-size:clamp(1.5rem, 5vw, 2.4rem);font-weight:500;text-wrap:pretty; }
.quote-text span { display:block;font-size:clamp(1.2rem, 5vw, 1.6rem);margin-top:1rem; }


.archive-grid { margin-bottom:clamp(3rem, 8vw, 6rem); } 


iframe { border-radius:1rem;width:100%;border:none;height:600px; }
.mc-field-group { display:flex;flex-wrap:wrap;gap:1rem; }


/* Tablet Size */
@media(max-width:1000px){

	body.nav-open, html.nav-open { overflow:hidden; }
/*	html.nav-open { padding-right:15px; }*/
	/* Move this to it's own query if it needs to break down earlier */
		.mobile-toggle { width:48px;height:40px;display:inline-block;text-align:center;font-weight:400;font-size:1rem;z-index:10; }
		.toggle-bars { padding:0.5rem;width:48px;height:40px; }
		.toggle-bar { width:100%;height:4px;margin-bottom:5px;background:var(--black); }
		.toggle-bar:last-child { margin-bottom:0px; }
/*		.mobile-toggle.active .toggle-bar { background:var(--pink); }*/
		.mobile-toggle.active .toggle-bar:nth-child(1) { transform:translate(0,8px) rotate(45deg); }
		.mobile-toggle.active .toggle-bar:nth-child(2) { transform:translate(0,-1px) rotate(-45deg); }
		.mobile-toggle.active .toggle-bar:last-child { display:none; }


		.menu-nav-menu-container { height:80%;overflow-y:auto; }
		#navmenu {   transform:translateX(100%);transition:transform 0.5s ease-in-out;position:fixed;background:#fff;top:0;right:0;width:calc(100% - 2rem);z-index:9;max-width:328px;height:100%;padding:7rem 0 2rem;display:flex;align-content:flex-end;flex-wrap:wrap-reverse; }
		#navmenu.active { transform:translateX(0); }
		#navmenu .menu { flex-wrap:wrap;row-gap:0rem; }
		#navmenu .menu li { display:inline-block;width:100%;padding:0; }
		#navmenu .menu a { display:inline-block;width:100%;padding:1rem; }
		#navmenu .menu > li > a { padding-left:2.5rem; }
		#navmenu .sub-menu-wrapper > .sub-menu a { padding-left:4rem; }
		#navmenu .sub-menu-wrapper > .sub-menu .sub-sub-menu a { padding-left:5rem; }

		#navmenu .menu > li > a:hover, #navmenu .menu > li > a.open { background:var(--pink-soft); }
		#navmenu .sub-menu-wrapper > .sub-menu :is(a:hover, a:focus, a.open) { background:var(--orange-soft); }
		#navmenu .sub-menu-wrapper > .sub-menu .sub-sub-menu :is(a:hover, a:focus, a.open) { background:var(--yellow-soft) } 

		#navmenu .sub-menu-wrapper { width:100% }
		#navmenu .sub-menu { width:100%;position:static; }
		#navmenu .sub-menu-wrapper > .sub-menu { box-shadow:none;border-radius:0px; }
		#navmenu .sub-menu-wrapper::before { display:none; }

		#navmenu .sub-menu-wrapper { position:static; }

		nav .nav-cover { transition:opacity 0.5s ease-in-out;display:block;position:fixed;top:0;left:0;background:#000;opacity:0;pointer-events:none;width:100%;height:100%;z-index:7; }
		nav.active .nav-cover { opacity:0.5;pointer-events:all; }

		.donate { width:calc(100% - 4rem);margin-left:2rem;justify-content:center; } 
		.hide::after { width:18px;height:18px; }
		.hide { top:auto;bottom:3rem;font-size:1rem;padding:0.75rem 1rem; }
		.hide:hover { padding-right:2rem; }
		.hide span.hideonmobile { display:none; }
	/* ---------------------- */


	.team-grid { display:block; }


  .team-grid .slick-track {
    display:flex;
  }

.team-grid .slick-slide,
.team-grid .slick-slide > div {
    display:flex;height:inherit;
  }

	.team-block { margin:0 0.5rem;max-width:100%; }

	.footer { padding-top:6rem; }
	.footer .logo { right:auto;left:2rem; }
		footer .socials { text-align:left;margin-top:0.5rem; }
.footer-columns { margin-top:2rem }


}
@media(max-width:768px){

	.home-hero { flex-wrap:wrap-reverse; }
	.home-hero-text { padding:3rem 2.5rem; }
	.home-hero img { aspect-ratio:4/3;position:static; }

	a.button { line-height:125%; }
	.home-hero img.desktop { display:none; } 
	.home-hero img.mobile { display:block; }



}

/* Mobile Size */
@media(max-width:560px){

	.full_width_image img { aspect-ratio:4/3;object-fit:cover;height:100%; }

}