/*
 Theme Name:   Repair Reuse Declaration (Minimal Portfolio child theme)
 Theme URI:    https://repairreusedeclaration.uk/
 Description:  Child theme with minimal customation for the Repair and Reuse Declaration
 Author:       Graham Lally and Neil Mather
 Author URI:   https://groundlake.org
 Template:     minimal-portfolio
 Version:      0.0.1
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  repair-declaration
*/


/* 00-A. COLOUR SCHEME */

:root {
	--col-light: rgb(255, 250, 250);
	--col-dark: rgb(20, 20, 20);
	--col-yellow: rgb(255, 235, 0);
	--col-blue: rgb(140, 220, 255);
	--col-red: rgb(240, 90, 105); /* #F05A69 */
	--col-darker-yellow: rgb(255, 225, 0);

	--col-page-background: var(--col-light);
	--col-body-text: var(--col-dark);
	--col-body-links: var(--col-dark);

	--col-masthead-background: var(--col-yellow);
	--col-top-menu-item: var(--col-dark);
	--col-active-navbar-item-highlight: var(--col-red);

	--col-footer-background: var(--col-darker-yellow);
	--col-footer-links: var(--col-dark);

	--col-cta-banner-background: var(--col-blue);
	--col-cta-text: var(--col-dark);

	--col-cta-button: var(--col-dark);
	--col-cta-button-background: var(--col-yellow);

	--col-declaration-tint-light: var(--col-yellow);
}

/* 00-B. FONTS */

:root {
	--font-family-anton: "Anton";
	--font-family-archivo: "Archivo";
	--font-family-archivo-bold: "ArchivoBold";
	--font-family-archivo-black: "ArchivoBlack";
}

@font-face {
	font-family: "Anton";
	src: url("./fonts/Anton/Anton-Regular.ttf");
}

@font-face {
	font-family: "Archivo";
	src: url("./fonts/Archivo/static/Archivo-Regular.ttf");
}

@font-face {
	font-family: "ArchivoBold";
	src: url("./fonts/Archivo/static/Archivo-Bold.ttf");
	font-weight: bold;
}

@font-face {
	font-family: "ArchivoBlack";
	src: url("./fonts/Archivo_Black/ArchivoBlack-Regular.ttf");
}

:root {

	--font-banner-headline: var(--font-family-anton);
	--font-subheader: var(--font-family-archivo-black);
	--font-top-menu-items: var(--font-family-archivo-bold);
	--font-cta-buttons: var(--font-family-archivo-bold);
	--font-body-text: var(--font-family-archivo);

}

/* BODY STYLES */

body {
	background-color: var(--col-page-background) !important;
}

body, 
body li {
	font-family: var(--font-body-text) !important;
	font-size: 14pt !important; 
	color: var(--col-body-text) !important;
}


body .site-content {
	background-color: var(--col-page-background);
	line-height: 2.5rem;
}

h2,
h3 {
	letter-spacing: normal !important;
}

body a {
	color: var(--col-body-links);
	text-decoration: underline;
}

body .entry-content ul li {
	list-style-type: disc;
	list-style-position: outside;
	margin-left: 2em;
}

select {
	background-color: white;
	padding: 5px 6px !important;
}

/* adjust anchors for sticky menu */
.sticky-header a[name] {
	display: block;
	transform: translateY(-150px);
}

/* Or less on larger screens due to horizontal menu */
@media (min-width: 768px) {
	.sticky-header a[name] {
		transform: translateY(-100px);
	}
}

/* MASTHEAD */


/* Sticky masthead, if screen is high enough */
.sticky-header #masthead {
	position: sticky;
	top: 0px;
	width: 100lvw;
	padding-right: calc(100lvw - 100svw);
}
@media screen and (max-width: 768px) and (max-height: 5.5in) {
	.sticky-header #masthead {
		position: relative;
	}
	/* Readjust anchors */
	.sticky-header a[name] {
		transform: translateY(0px);
	}
}

.site-header .header-menu {
	background-color: var(--col-masthead-background) !important;
}


/* MENU */

.navbar-items li.navbar-item {
	font-family: var(--font-top-menu-items);
	font-weight: bold;
}

.navbar-items li.navbar-item a {
	color: var(--col-top-menu-item);
	text-decoration: none;
}

/* Small screens */
@media (max-width: 768px) {
	.navbar-items {
		padding: 0.5rem 0;
	}
	.navbar-items li.navbar-item {
		margin: 0.5rem 20px;
		line-height: 1em;
		height: auto;
		position: relative;
	}

	.navbar-items li.navbar-item a {
		padding-right: 6px;
		border-right: 4px solid transparent;
	}

	.navbar-items li.navbar-item.active-navbar-item > a {
		border-right: 4px solid var(--col-active-navbar-item-highlight);
	}
}
/* medium screens */
@media (min-width: 768px) {
	.navbar-items {
		margin: 0;
	}
	.navbar-items li.navbar-item {
		margin: 1em 20px 4px;
		line-height: 3em;
		height: auto;
		position: relative;
	}

	.navbar-items li.navbar-item a {
		text-decoration: none;
		padding: 0.7em 1em;
	}

	.navbar-items li.navbar-item.active-navbar-item > a {
		background-color: var(--col-active-navbar-item-highlight);
		color: var(--col-light);
	}
}

/* Submenu */
@media (max-width: 768px) {
	ul.navbar__subnav {
		display: none;
		height: 0px;
		width: 100%;
		text-align: right;
		/* hide the menu */
		opacity: 0.3;
		visibility: hidden;
		/* transition: 180ms all ease-out; */

	}
	li.subnav-item {
		background-color: var(--col-masthead-background);
		margin-right: 0;
		margin-top: 0.6rem;
		font-size: smaller !important;
	}

	/* Prepend emdash+ensp */
	li.subnav-item a::before {
		content: "\2014\2002"
	}

	/* show the menu */
	.dropdown:hover ul.navbar__subnav,
	.dropdown:focus-within ul.navbar__subnav {
		display: block;
		height: auto;
		opacity: 1;
		visibility: visible;
		padding: 0.5rem 0.6rem 0;
	}
}
/* Various styling taken from the accessible approach at https://moderncss.dev/css-only-accessible-dropdown-navigation-menu/ */
@media (min-width: 768px) {
	ul.navbar__subnav {
		position: absolute;
		top: 101%; /* calc(100% - 0.25rem); */
		left: 50%;
		transform: translateX(-50%);
		display: grid;
		place-items: center;
		box-shadow: 0 0.15em 0.25em rgba(black, 0.25);
		z-index: 10;

		/* hide the menu */
		transform: rotateX(-90deg) translateX(-50%);
		transform-origin: top center;
		opacity: 0.3;
		visibility: hidden;
		transition: 180ms all ease-out;

	}
	li.subnav-item {
		background-color: var(--col-masthead-background);
		width: 15rem;
		padding: 4px;
		margin: 0;
		/* border-radius: 4px; */
		border-top: 1px solid var(--col-dark);
		font-size: smaller !important;
	}

	/* show the menu */
	.dropdown:hover ul.navbar__subnav,
	.dropdown:focus-within ul.navbar__subnav {
		opacity: 1;
		transform: rotateX(0) translateX(-50%);
		visibility: visible;
	}
}

/* HERO TITLE BANNER */

.hero-banner__background-wrap {
	background-color: grey;

}

/* mobile */

.hero-banner__title {
	font-family: var(--font-banner-headline);
	font-size: 32pt;

	/* mobile */
	width: 100%;
	padding: 1.5rem;
	line-height: 1em;

	/* default colours: light on dark */
	background-color: var(--col-dark);
	color: var(--col-light);
}

@media (max-width: 768px) {
	.hero-banner__title.red-background {
		border-top: 4px solid var(--col-yellow);
	}
	.hero-banner__title.yellow-background {
		border-top: 4px solid var(--col-red);
	}
}

@media (min-width: 768px) {
	/* Show background image */
	.hero-banner__title {
		width: 17rem; 
		/* padding-bottom: 3rem; */
		margin-top: 4rem;
		margin-bottom: 2.5rem;
		margin-left: 130px;
	}

	.hero-banner__background-wrap {
		border-bottom: 4px solid var(--col-red);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}
	
}

/* background colour options */
.hero-banner__title.red-background {
	background-color: var(--col-red);
}
.hero-banner__title.yellow-background {
	background-color: var(--col-yellow);
	color: var(--col-dark);
}

/* title font colour options */
.hero-banner__title .title__red {
	color: var(--col-red);
}
.hero-banner__title .title__yellow {
	color: var(--col-yellow);
}

/* CALL TO ACTION BANNER */

#call-to-action-banner {
	background-color: var(--col-cta-banner-background);
	color: var(--col-cta-text);
	font-family: var(--font-body-text);
	padding-top: 2rem;
	padding-bottom: 1rem;
}

.cta-item--intro {
	margin-bottom: 1rem;
}

.btn.cta-item--button {
	background-color: var(--col-cta-button-background);
	color: var(--col-cta-button);
	text-decoration: none;
	width: 15rem;
	border-color: var(--col-cta-button-background);
	border-radius: 0.5rem;
	margin-top: 0.5rem;
	font-family: var(--font-cta-buttons);
}

.btn.cta-item--button:visited {
	color: var(--col-cta-button);
	text-decoration: none;
}

/* swap colours */
.btn.cta-item--button:hover,
.btn.cta-item--button:focus {
	background-color: var(--col-cta-button);
	color: var(--col-cta-button-background);
	border-color: var(--col-cta-button);
}


/* CONTENT */

/* Reset vertical padding from parent theme */

#page .site-content {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.site-content .container,
#footer .container {
	width: 928px;
}

h1.entry-title,
.subheader {
	font-family: var(--font-subheader);
}

h2.subheader {
	font-size: 20pt;
}
h3.subheader {
	font-size: 18pt;
}

h1, h2, h3, h4, h5, h6 {
	text-transform: none !important
}

/* Shrink slightly for smaller screens and allow space for collapsers */
@media (max-width: 500px) {
	h3.subheader {
		font-size: 14pt;
		padding-right: 30px;
	}
}

.entry-content li {
	list-style-position: outside;
}



/* 20. FOOTER       */

footer {
	background-color: var(--col-footer-background);
	color: var(--col-body-text);
	padding-top: 3rem;
	padding-bottom: 3rem;
}

footer a {
	color: var(--col-body-links);
	text-decoration: underline;
}

/* DECLARATION PAGE */

.declaration-list {
	font-weight: bold;
	margin-bottom: 3em;
}

.declaration-list li {
	list-style-type: none !important;
	margin: 0 0 0.5rem 0;
	padding-left: 2rem;
	background-image: url("assets/images/Yellow-Bullet.svg");
	background-repeat: no-repeat;
	background-position: left 0.4em;
	background-size: 1.2em;
}  


/* SIGN PAGE / FORM */

.sign-content {
	margin-top: 3rem;
	margin-bottom: 3rem;
}

.sign-content h2 {
	/* margin-top: 2em; */
	margin-bottom: 1em; */
}

.sign-content .gform_button {
	background-color: var(--col-cta-button-background);
	color: var(--col-cta-button);
	width: 25rem;
	padding: 0.5em 3em;
	border-color: var(--col-cta-button-background);
	border-radius: 0.5rem;
	font-family: var(--font-cta-buttons);
}
	
.sign-content .gform_button:visited {
	color: var(--col-cta-button);
	text-decoration: none;
}
	
/* swap colours */
.sign-content .gform_button:hover,
.sign-content .gform_button:focus {
	background-color: var(--col-cta-button);
	color: var(--col-cta-button-background);
	border-color: var(--col-cta-button);
}

.gfield_checkbox label {
	padding-top: 14px !important;
}


/* SIGNATORIES PAGE */

.signatories-content {
	margin-top: 3rem;
	margin-bottom: 3rem;
}

.signatory-section {
	margin-top: 2rem;
}

.signatory-section__collapser {
	text-decoration: none;
	position: absolute;
	top: 0;
	right: 0;
	margin-right: 15px;
	background-image: url('assets/images/Maximise.svg');
	width: 1.5rem;
	height: 1.5rem;
	background-position: center center;
	background-size: cover;
}

.signatory-section ul {
	/* transition: all 1s ease-out;
	opacity: 1;
	transform: rotateX(0);
	transform-origin: top center; */
	visibility: visible;
	/* height: auto; */
}

.signatory-section.collapsed .signatory-section__collapser {
	background-image: url('assets/images/Minimise.svg');
}

.signatory-section.collapsed ul {
	display: none;
	height: 0;
	visibility: hidden;
	/* transform: rotateX(-90deg); */
	/* opacity: 0.3; */
}

.signatory-section ul, 
.signatory-section li {
	list-style-type: none;
}

.signatory-section li {
	border-bottom: 3px solid var(--col-yellow);
	margin: 0;
	padding: 0;
	position: relative;
}

.signatory-section li .item-name {
	height: 100%;
	display: block;
	float: left;
	padding: 0;
	margin: 6px 0;
	line-height: 1.7em;
}

.signatory-section li a,
.signatory-section li a:hover,
.signatory-section li a:visited {
	color: var(--col-body-text);
	text-decoration:none;
}

/* Place badges below name by default, and then move to floating right on larger screens */

.affiliation {
	color: var(--col-light);
	display: block;
	float: left;
	padding: 0.25em 0.4em;
	margin-bottom: 10px;
	font-size: 75%;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: 0.25rem;
	text-transform: uppercase;
	background-color: #666;
}

@media (min-width: 768px) {
	.affiliation {
		float: right;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}
}

.affiliation--conservative {
	background-color: #0000a0;
}
.affiliation--green,
.affiliation--green_party {
	background-color: #00d490;
}
.affiliation--labour {
	background-color: #dc241f;
}
.affiliation--liberal_democrats {
	background-color: #faa61a;
}
.affiliation--sinn_fein {
	background-color: #12876F;
}
.affiliation--sdlp {
	background-color: #156950;
}
.affiliation--dup {
	background-color: #c83544;
}
.affiliation--snp,
.affiliation--scottish_national_party {
	background-color: #fdf38e;
	color: #000;
}
.affiliation--independent {
	background-color: #656565;
}
.affiliation--alba {
	background-color: #005EB8;
}
.affiliation--alliance {
	background-color: #F4C72E;
}
.affiliation--plaid_cymru {
	background-color: #005b54;
}
.affiliation--reclaim {
	background-color: #14172D;
}