/*
 Theme Name:   Repair Day
 Theme URI:    https://repairday.org/
 Description:  Child theme with minimal customation for the Repair and Reuse Declaration
 Author:       Graham Lally for the Restart Project
 Author URI:   https://groundlake.org
 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:  repairday
 Template:     twentytwentyfive
*/



/* Colours reference, as we're not using SASS or CSS variables yet, here's a handy reminder:
	Green         - #329A9F
	Acid yellow   - #FCFF34
	Orange/yellow - #F9CD2D
	Red           - #E9543B
	Blue/purple   - #42389E 
	Light grey    - #E5E5E5
*/ 

/* 1. GENERAL                      */
/* 1A. LAYOUT                      */
/* 1B. TYPOGRAPHY                  */
/* 1C. UTILITIES                   */
/* 1D. ENTRY CLASSES               */

/* 2.  HEADER                      */
/* 2B. SITE BRANDING / LOGO        */
/* 2C. MENU and SEARCH BOX         */

/* 3. MAIN NAVIGATION              */

/* 4. FOOTER                       */
/* 4A. GENERAL FOOTER              */

/* 5. WIDGETS                      */

/* 6. COMMON COMPONENTS            */
/* 6A. FEATURED IMAGE              */
/* 6B. PAGINATION                  */
/* 6C. BUTTONS                     */
/* 6D. PAGE TITLES                 */
/* 6E. COLOUR BLOCKS               */

/* 7. ARCHIVE                      */

/* 8. HOMEPAGE COMPONENTS          */

/* 10. NEWS PAGE                   */
/* 10B. SINGLE POST                */
/* 10C. SINGLE POST SIDEBAR        */
/* 10D. POST NAVIGATION & COMMENTS */
/* 10E. SINGLE POST ARCHIVE        */
/* 10F. POST FOOTER                */
/* 10G. SEARCH RESULTS             */


/* 20. BLOCKS - see blocks.css     */


/* 00-A. COLOUR SCHEME */

:root {
	--col-light: #fafafa;
	--col-dark: #00280a;
	--col-yellow: #ffe67d;
	--col-blue: rgb(140, 220, 255);
	--col-red: #fa5037;
	--col-darker-yellow: rgb(255, 225, 0);
    --col-purple: #6e50aa;
    --col-lilac: #b98cff;
    --col-dark-red: #dc3200;
    --col-orange: #ff965a;
    --col-green: #87d7a0;

    --col-stitch: var(--col-light);
    --rd-stitch-style: dashed;
    --rd-stitch-medium: var(--rd-stitch-style) 2.5px;
    --rd-stitch-overlap: 6px;
	--stitch-width: 12px;
    /* A note on this stitch definition:
      This creates a horizontal pattern of dots, with a vertical linear stripe that fills in the midpoints between
      every other dot, creating a rectangle with rounded sides. In other places, we do the same but twisted 90 degrees
      for a vertical version.
      However, as we rely on variables here (including the colour), we do need to re-declare this - verbatim - if we 
      redeclare the underlying variables. See the various <colour>-block sections later on.
      Sidenote: Also see https://freefrontend.com/css-background-patterns/ for a fascinating gallery of other intense CSS-only
      background patterns. */
    --stitch-background-def: radial-gradient(circle closest-side,var(--col-stitch) 98%,#0000) 0 0/var(--stitch-width) 100%, linear-gradient(90deg,var(--col-stitch) 50%, #0000 0) calc(var(--stitch-width)/2) 0/calc(2*var(--stitch-width)) 100%;

    --down-arrow-col: var(--col-orange);
    --illustration-col: var(--col-green);

    --breakpoint-small-max: 600px;
    --breakpoint-medium-max: 768px;
    --breakpoint-large-max: 1168px;
    /* Anything higher is xlarge */

    --normal-page-width: 92%;
    --max-page-width: 1000px;
    --picture-border-col: var(--col-green);
    --illustration-width: 150px;
    --illustration-height: 150px;

    --menu-transition-time: 1s;
    --menu-scroll-shrink-transition: all 0.5s ease;

    --flip-symbol-transition: 0.3s linear;

    /* Override these in colour blocks later */
    --block-header-background-col: var(--col-red);
    --block-header-col: var(--col-light);

    --font-staatliches: 'Staatliches';

    --font-ibm-plex-serif: 'IBM Plex Serif';
    --font-ibm-plex-serif-bold: 700 normal 1em var(--font-ibm-plex-serif);

    --font-ibm-plex-sans: 'IBM Plex Sans';
    --font-ibm-plex-sans-medium: 500 normal 1em var(--font-ibm-plex-sans);
    --font-ibm-plex-sans-medium-italic: 500 italic 1em var(--font-ibm-plex-sans);
    --font-ibm-plex-sans-bold: 700 normal 1em var(--font-ibm-plex-sans);
    --font-ibm-plex-sans-bold-italic: 700 italic 1em var(--font-ibm-plex-sans);
    --font-body-normal: var(--font-ibm-plex-sans-medium);

    --font-body-bold: var(--font-ibm-plex-sans-bold);
    --font-body-italic: var(--font-ibm-plex-sans-medium-italic);
    --font-body-bold-italic: var(--font-ibm-plex-sans-bold-italic);

	--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-cta-button-hover: var(--col-red);

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

body {
    background-color: var(--col-light);
    overflow-x: hidden;
}

/********************************/
/********************************/
/* 1. GENERAL                   */
/********************************/
/********************************/

/* 1A. LAYOUT                   */

.site-content {
    width: 100%;
    margin: 0;
    padding: 0;
}

.site-content .colour-block {
    width: 100%;
    margin: 0;
    padding: 0 0 2em 0;
    position: relative;
}

.entry .entry-content,
.entry .entry-summary {
    max-width: 90%;
    margin: auto;
}

@media only screen and (min-width: 768px) {
    
	.entry .entry-content,
	.entry .entry-summary {
		padding: 0 32px;
        max-width: 65%;
	}

	.entry .entry-content > *, 
	.entry .entry-summary > * {
		max-width: none;
	}
}

@media only screen and (min-width: 1168px) {

	.entry .entry-summary,
	.entry .entry-content {
		max-width: var(--max-page-width);
		margin-left: auto;
		margin-right: auto;
        padding: 0 20px;
        /*
		padding-right: 0;
		padding-left: 0;
        */
	}

    /*
	.entry .entry-content > div,
	.entry .entry-content > article,
	.entry .entry-content > section {
		padding-right: 60px;
	}
        */
    .entry .entry-content.centred-entry-content > div {
        padding-right: 0;
    }
}

.centred-entry-content > div {
    text-align: center;
    text-wrap: balance;
}

/* 1B. TYPOGRAPHY             */
body,
.entry-footer {
	font-size: 18px;
	line-height: 32px;
}

.entry {
    font: var(--font-body-normal);
}

.entry strong {
    font: var(--font-ibm-plex-sans-bold);
}

.entry em {
    font: var(--font-body-italic);
}

.entry strong em,
.entry em strong {
    font: var(--font-body-bold-italic);
}

.entry .entry-content > ol {
	padding-left: 20px;
}

@media(min-width: 1168px) { 
	.page-template-default .entry .entry-content > ol {
		padding-left: 80px;
	}
}

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

.entry .entry-content > ul li {
	position: relative;
}

.entry .entry-content > ul li::before {
	position: absolute;
	content: ''; 
	background-color: #42389E;
	display: block; 
	width: 8px;
	height: 8px;
	border-radius: 8px;
	margin-left: -1em;
	margin-top: 13px;
}

@media(min-width: 1168px){ 

	.entry .entry-content > ul {
		padding-left: calc(60px + 1em);
	}
}

.author-description .author-link, 
.comment-metadata, .comment-reply-link, .comments-title, .comment-author .fn, 
.discussion-meta-info, 
.entry-meta, .main-navigation, 
.no-comments, .not-found .page-title, .error-404 
.page-title, .post-navigation .post-title, .page-links, .page-description, 
.pagination .nav-links, .sticky-post, 
.site-title, .site-info, #cancel-comment-reply-link, 
img::after, 
h1, h2, h3, h4, h5, h6,
.header-font {
	font-family: var(--font-staatliches), sans-serif;
}

h1, h2, h3, h4, h5, h6, .header-font {
    letter-spacing: 0.5px;
    text-align: center;
    text-wrap: balance;
}

h1:not(.site-title)::before, h2::before {
	display: none;
}

h1 {
	font-size: 36px;
	line-height: 48px;
}

h2, .entry-title {
	font-size: 28px;
    margin: 0;
    text-align: center;
}

h3 {
	font-size: 22px;
	line-height: 30px;
}
h4 {
	font-size: 28px;
	line-height: 36px;
}
@media(min-width: 768px){ 
	h3, h4 {
		font-size: 28px;
		line-height: 36px;
	}
}

h5 {
	font-size: 18px;
	line-height:32px;
	color: #FFFFFF;
}


blockquote {
	hyphens: none;
}

@media(min-width: 768px){
	blockquote {
		text-align: justify;
	}
}

/* 1C. UTILITIES                */
@media(min-width: 600px){

	.one-third-two-thirds .wp-block-column {
		margin: 0;
	}

	.one-third-two-thirds .wp-block-column:nth-of-type(1) {
		padding-right: 1em;
	}
}

@media(min-width: 768px){

	.one-third-two-thirds .wp-block-column:nth-of-type(1) {
		flex-basis: 33%;
		padding-right: 0;
	}

	.one-third-two-thirds .wp-block-column:nth-of-type(2) {
		flex-basis: 60%;
	}
}

.bgcolor-green {
	background-color: #329A9F;
}
.bgcolor-sunny-yellow {
	background-color: #F9CD2D;
}
.bgcolor-black-opacity50 {
	background-color: rgba( 0, 0, 0, 0.5);
	padding: 10px;
}

.color-green {
	color: #329A9F;
}
.color-black {
	color: black;
}


@media only screen and (max-width: 767px) {
	.hide-on-mobile {
		display: none;
	}
}

/* Allow content editors to make tables full width on larger screens, 
   by setting an additional CSS class of "full-width-table" in the WP editor. */
   @media only screen and  (min-width: 1168px) {

	.entry-content:has(.full-width-table),
	.block:has(.overview-table--table.full-width-table),
	.full-width-table {
		overflow: visible;
	}

	.full-width-table table {
		width: 95vw;
		margin-left: 81%;
		transform: translateX(-50%);
	}

	.overview-table--table.full-width-table table {
		margin-left: 50%;
	}
	
}


/* 1D. ENTRY CLASSES             */
.entry .entry-content a:not(.cta-button),
.entry .entry-content a:not(.cta-button):link,
.entry .entry-content a:not(.cta-button):visited {
	color: var(--colour-block-col, var(--col-dark));
	border-bottom: 2px dashed var(--colour-block-col, var(--col-dark));
	text-decoration: none;
}
.entry .entry-content .footer-menu a {
    border-bottom-color: var(--col-dark);
}

.entry .entry-content p a:not(.cta-button):hover,
.entry .entry-content p a:not(.cta-button):focus,
.footer-menu a:not(.cta-button):hover,
.footer-menu a:not(.cta-button):focus,
.gfield_description a:hover,
.gfield_description a:focus,
.content-link-hover-style:hover,
.content-link-hover-style:focus {
	border-bottom-style: solid !important;
    position: relative;
    background: var(--col-green);
    color: var(--col-dark) !important;
    border-bottom-color: var(--col-dark) !important;
}

.entry-meta,
.entry-footer {
	color: black;
	font-size: 1em;
}

.entry .entry-title {
	margin-top: 1rem;
	font-size: 42px;
}
@media only screen and (min-width: 768px) {
	.entry .entry-title { 
		margin-top: 2rem;
	}
}


.entry .entry-title::before {
	display: none;
}

.entry .entry-content > .alignfull, 
.entry .entry-summary > .alignfull {
	padding: 0;
	margin: 0;
}




/********************************/
/********************************/
/* 2. HEADER                    */
/********************************/
/********************************/
.site-header {
	background-color: var(--col-lilac);
    width: 100vw;
    /* padding-bottom: 8px; */
    z-index: 10;
    position: sticky;
    top: 0;
}
.site-header-inner {
    height: 100%;
    width: 100%;
    /* border-bottom: var(--rd-stitch-medium) var(--col-light);  */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 5;
    padding-bottom: var(--rd-stitch-overlap);
}

.site-header-inner::after {
    content: "";
    position: relative;
    width: 100%;
    height: 3px;
	background: var(--stitch-background-def);
    z-index: -1;
}

/* Small screen: Style button */
.navbar__toggle-button {
    display: block;
    justify-self: end;
}

.site-header__contentwrap {
    width: var(--normal-page-width);
    display: flex;
    justify-content: center;
}

@media only screen and (min-width: 768px) {
    .site-header__contentwrap {
        max-width: var(--max-page-width);
        justify-content: space-between;
        align-items: center;
    }
}

/* 2B. SITE BRANDING / LOGO     */
.site-branding__container {
	padding: 0; /* 0 1em 0.5em; */
}

.site-branding__container {
    height: 90px;
    transition: var(--menu-scroll-shrink-transition);
}

/* Shrink a bit when scrolled down */
body.scrolled-down .site-branding__container {
    height: 60px;
}

@media only screen and (min-width: 768px) {
	.site-branding__container {
		padding-bottom: 0;
	}
}

.site-branding {
    height: 100%;
}

.site-logo {
    height: 100%;
    width: 100%;
    max-height: 6rem;
    aspect-ratio: 1 / 1;
	margin-bottom: 0;
	text-align: left;
    /* transform: translateY(-50%); */
	display: inline-block;
}

/* Pop site logo out from header */
.site-logo img {
    float: left;
	max-width: 300px;
    height: 110%;
    width: auto;
    margin-top: 10px;
    /* transition: var(--menu-scroll-shrink-transition); */
    /* Bit of a hack to adjust x position back a bit, after being bigger than the parent div */
    transform: translateX(-11%);
}

body.scrolled-down .site-logo img {
    height:105%;
    transform: translateX(-8%);
}

.site-logo .custom-logo-link {
	height: auto;
	width: auto;
	border-radius: 0;
}

.site-logo .custom-logo-link:hover, 
.site-logo .custom-logo-link:active, .site-logo .custom-logo-link:focus {
	box-shadow: none;
}

@media only screen and (min-width: 768px) {
	.site-branding {
		max-width: 95%;
		margin: 0;
        line-height: 0;
		padding: 0;
	}

	.site-logo {
		width: 100%;
		display: inline-block;
    }
}

/* 2C. MENU */




/********************************/
/********************************/
/* 3. MAIN NAVIGATION           */
/********************************/
/********************************/
nav .menu-item a,
#colophon .site-info nav .menu-item a,
.main-navigation .main-menu > li, /* this helps to ensure icons & svgs are also the right colour */
.main-navigation .main-menu > li > a {
	color: var(--col-dark);
    text-decoration: none;
}

.main-navigation {
	margin-top: 0;
}

body .main-navigation,
body.page .main-navigation {
	display: block;
}

body .main-navigation.open,
body.page .main-navigation.open {
	display: block;
}

@media(min-width: 768px) {
	body .main-navigation,
	body.page .main-navigation {
		display: inline-block;
		background-color: inherit;
	}

    html {
        scroll-padding-top: 130px;
    }
}

/* On desktop sites only */
@media(min-width: 768px) {
	.site-main-nav__container {
		background-color: transparent;
		margin-right: 2em;
	}
}


/* Menu button stuff */

.hamburger,
.nav-toggle {
    display: none;
}

@media(max-width: 767px) {
    .header__navbar--toggle-bar {
        display: flex;
        align-items: center;
        padding: 0 1em 4px;

        position: absolute;
        right: 0;
        top: 0;
        width: auto;
        transform: translateY(50%);
    }

    .header__navbar--toggle-bar button {
        content: '-';
    }

    .hamburger {
        position: absolute;
        right: 25px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 100;
        width: 44px;
        height: 44px;
        display: grid;
        place-content: center;
        gap: 6px;
        cursor: pointer;
        border-radius: 10px;
    }

    .bar {
        width: 40px;
        height: 5px;
        background: var(--col-dark);
        border-radius: 999px;
        transition: transform var(--dur) ease, opacity var(--dur) ease;
    }

    .sr-only{
        position:absolute; width:1px; height:1px; padding:0; margin:-1px;
        overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
    }

    .nav-toggle{
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    /* Hide main nab until needed */
    .main-navigation {
        position: fixed;
        opacity: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        padding: 3em 0 0 0;
        transform: translateY(-105%);
        transition: opacity 0.5s, transform 1s ease; /* var(--menu-transition-time) ease; */
        z-index: 1001;
        background: var(--col-red);
    }

    .nav-close {
        display: block;
        font-size: 60pt;
        float: right;
    }
    .nav-close:before {
        content: "\00d7";
        display: block;
        margin: 20px 20px 0 0;
        cursor: pointer;
    }

    .site-branding-nav {
        clear: both;
    }

    .main-menu {
        margin-top: 60px;
    }

    .main-menu,
    .submenu {
        display: flex;
        flex-direction: column;
        gap: 3em;
    }

    .main-menu .menu-item {
        font-size: 42pt;
    }

    .overlay {
        position: fixed;
        inset: 0;
        background: var(--col-dark-red);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s, visibility 0.5s linear;
        z-index: 1000;
    }

    /* Overlay when menu open */
    .nav-toggle:checked ~ .overlay {
        opacity: 0.5;
        visibility: visible;
    }

    .nav-toggle:checked ~ .main-navigation {
        transform: translateY(0);
        opacity: 1;
        display: block;
    }

    .site-main-nav__container:has(.nav-toggle:checked):has(input.subnav-toggle:checked) .main-navigation {
        /* Slide menu over by half a screen */ 
        transform: translateX(-50%);
    }


    /* Click overlay to close, by associating it to the checkbox */
    .overlay{ pointer-events: none; }
    .nav-toggle:checked ~ .overlay{ pointer-events: auto; }
}

@media(min-width: 768px) {

	/* Hide the mobile nav button on bigger screens */
	.header__navbar--toggle-bar {
		display: none;
	}
}

.main-navigation > div.site-branding-nav {
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	justify-content: center; 
}

@media(min-width: 768px) {

	.main-navigation > div.site-branding-nav {
		/* height: 70px; */
		text-align: center;
		border: 0;
	}
}


/* Screens smaller than 768px, mobile view only */
@media(max-width: 767.9px) {

	.main-navigation ul.main-menu {
		width: 500px;
	}

    .main-navigation ul.main-menu > li {
        text-align: center;
    }

	.main-navigation .main-menu > li.menu-item-has-children .submenu-expand {
		display: none;
	}
}

/* @media(min-width: 1024px) {

	.main-navigation > div.site-branding-nav {
		justify-content: flex-end;
	}
} */

.main-navigation ul.main-menu {
    margin: 2em 0 2em 0;
    padding: 0;
}

.main-navigation ul.main-menu > li {
	display: block;
    position: relative;
	margin: 0;
	padding: 0;
}

@media(min-width: 768px) {

    .main-navigation ul.main-menu {
        margin: 0;
        line-height: normal;
    }
    
	.main-navigation ul.main-menu > li {
		display: inline-block;
		font-size: 24px;
		padding-left: 1rem;
	}
}

.main-navigation .main-menu li a:hover {
	color: var(--col-yellow);
}

@media(min-width: 768px) {
	.main-navigation .main-menu > li {
		margin-left: 1em;
	}
}


/* 3B. SUBMENU                 */

.submenu-wrap {
    display: none;
    list-style-type: none;
}

.submenu li {
    display: block;
	margin: 0;
	padding: 0;
}

.menu-item--with-submenu a {
    cursor: pointer;
}

@media(max-width: 767.9px) {

    .subnav-indicator {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        transition: transform var(--flip-symbol-transition);
    }

    .site-main-nav__container:has(.nav-toggle:checked):has(input.subnav-toggle:checked) .subnav-indicator {
        transform: scale(-1, 1) translateY(-50%);

    }

    /* Hide main nab until needed */
    .submenu-wrap-mobile {
        display: flex;
        flex-direction: column;
        justify-content: end;
        align-items: center;
        position: fixed;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
        transform: translateX(100%);
        transition: transform var(--menu-transition-time) ease;
        z-index: 1001;
        background: var(--col-lilac);
    }
    .submenu-wrap-mobile::before {
        content: "";
        position: absolute;
        left: var(--rd-stitch-overlap);
        top: 0;
        width: 4px;
        height: 100%;
        --col-stitch: var(--col-darker-yellow);
        background: radial-gradient(circle closest-side, var(--col-stitch) 98%, #0000) 0 0 / 100% var(--stitch-width), linear-gradient(180deg, var(--col-stitch) 50%, #0000 0) 0 calc(var(--stitch-width) / 2) / 100% calc(2 * var(--stitch-width));
    }

    .nav-toggle:checked ~ .submenu-wrap-mobile {
        width: 50%;
    }

    .Xsubmenu-wrap::before {
        content: "";
        display: block;
        float: right;
        width: var(--rd-stitch-overlap);
        border-right: var(--rd-stitch-style) var(--col-yellow);
    }

    .submenu-wrap-mobile ul.submenu {
        padding: 0;
        margin: 0 0 2em 0;
        display: flex;
        flex-direction: column;
        height: 100%;
        align-items: end;
        justify-content: end;
    }
}

@media only screen and (min-width: 768px) {

    ul.main-menu {
        position: relative;
    }

    .subnav-indicator {
        float: right;
        transform: rotate(90deg);
        margin-left: 10px;
    }

    /* Hide main nab until needed */
    .submenu-wrap-desktop {
        display: none;
        /* flex-direction: column; 
        justify-content: end;
        align-items: center;*/
        position: absolute;
        bottom: 100%;
        right: 0;
        width: 100%;
        height: 100%;
        transform: translateY(100%);
        transition: transform var(--menu-transition-time) ease;
        z-index: 1001;
    }

    .nav-toggle:checked ~ .submenu-wrap-desktop {
        display: block;
    }

    .submenu-wrap-desktop .submenu::after {
        content: "";
        position: absolute;
        width: 110%;
        height: 110%;
        display: block;
        top: -10px;
        left: -px;
        width: 105%;
        height: 110%;
        background-color: var(--col-red);
        transform: rotate(2.5deg);
        z-index: 1008;
    }

    .submenu-wrap-desktop .submenu {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: end;
        align-items: center;
        padding: 1.65em 0 0 0;

    }

    .submenu-wrap-desktop .submenu li {
        line-height: 42px;
        width: 85%;
    }

    .submenu-wrap-desktop .submenu li:first-child {
        border-top: var(--rd-stitch-medium) var(--col-yellow);
    }


    .menu-item--with-submenu label {
        position: relative;
        z-index: 1010;
    }
    .submenu-wrap-desktop .submenu li {
        z-index: 1010;
    }



}


/********************************/
/********************************/
/* 4. FOOTER                    */
/********************************/
/********************************/

/* 4A. GENERAL FOOTER           */
.site-footer {
	background-color: var(--col-light);	
}

.site-footer .colour-block--content {
    gap: 4rem;
}

.colour-block:has(.block-header) .colour-block--content {
    margin-top: 1em;
}

.footer__main-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footer__trp_logos {
    width: 100%;
    order: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
}
.footer__trp_logos .rd-logo {
    width: 100%;
    text-align: center;
}
.footer__trp_logos .rd-logo img {
    width: 80%;
    max-width: 250px;
}
.footer__trp_logos .powered-created-by {
    width: 100%;
    text-align: center;
    white-space: nowrap;
}

.entry .entry-content .footer__trp_logos .powered-created-by a {
    border: 0;
}

.footer__trp_logos .powered-created-by img {
    margin-top: 0.5em;
    width: 80%;
    max-width: 250px;
}

.footer__menus {
    width: 100%;
    order: 1;
    margin-bottom: 3em;
}
.footer-menu {
    /* border-left: var(--rd-stitch-medium) var(--col-purple); */

    list-style-type: none;
    padding: 0 0 0 2em;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    position: relative;
}
.footer-menu::before {
    content: "";
    position: absolute;
    width: 4px;
    height: 100%;
    top: 0;
    left: 0;
    --col-stitch: var(--col-purple);
    background: radial-gradient(circle closest-side, var(--col-stitch) 98%, #0000) 0 0 / 100% var(--stitch-width), linear-gradient(180deg, var(--col-stitch) 50%, #0000 0) 0 calc(var(--stitch-width) / 2) / 100% calc(2 * var(--stitch-width));
}

@media only screen and (min-width: 768px) {

    .footer__main-block {
        flex-direction: row;
        justify-content: space-between;
        align-items: start;
        gap: 2em;
    }
    .footer__trp_logos .rd-logo {
        width: 100%;
        text-align: left;
    }
    .footer__trp_logos {
        width: 50%;
    }
    .footer__trp_logos .powered-created-by {
        display: flex;
        text-align: left;
        gap: 3em;
    }
    .footer__trp_logos .powered-created-by img {
        width: 100%;
        max-width: 200px;
    }
    .footer__trp_logos .powered-by {
        width: 30%;
    }
    .footer__trp_logos .created-by {
        width: 70%;
    }
    /* Line up with TRP logo */
    .footer__trp_logos .created-by img {
        /* @TODO? Convert this to flex boxes for better vertical centering */ 
        margin-top: 21px;
    }


    .footer__menus {
        width: 50%;
        display: flex;
        justify-content: end;
        order: 3;
        align-self: end;
        margin-bottom: 0;
    }
    .footer-menu {
        list-style-type: none;
    }
}

.footer__partners {
    margin-top: 2em;
}

.partners {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 55px;
    align-items: center;
    margin-top: 3em;
}

img.partner-logo {
    max-height: 80px;
    max-width: 100px;
}

/********************************/
/********************************/
/* 5. WIDGETS                   */
/********************************/
/********************************/
.widget-area a,
.widget-area a:link,
.widget-area a:visited {
	color: white;
	border-bottom: 3px solid #F9CD2D;
}
.widget-area a:hover {
	color: white;
	border-bottom: 3px solid #FCFF34;
}
.blog-sidebar__container {
	margin-bottom: 1.5rem;
}
@media only screen and (min-width: 1168px) {
	.blog-sidebar__container {
		margin-bottom: 40px;
	}
}

.blog-sidebar__container:nth-child(1) {
	background-color: #329A9F;
}
.blog-sidebar__container:nth-child(2) {
	background-color: #42389E;
}
.blog-sidebar__inner {
	padding: 20px;
	color: white;
}

@media only screen and (min-width: 768px) {
	.blog-sidebar__inner {
		max-width: 80%;
		margin: auto;
		padding: 32px 60px;
	}
}

@media only screen and (min-width: 1168px) {
	.blog-sidebar__inner {
		max-width: 1100px;
		margin-left: auto;
		margin-right: auto;
		padding: 20px;
	}
}

.blog-sidebar__inner > h5 {
	margin-top: 0;
}


/********************************/
/********************************/
/* 6. COMMON COMPONENTS         */
/********************************/
/********************************/

/* 6A. FEATURED IMAGE           */
.featured-image {
	margin: 60px auto 20px; 
}

.cta-button-wrap {
    display: flex;
    justify-content: center;
    margin: 0 0;
}
.cta-button {
    font-family: var(--font-staatliches);
    font-size: 16pt;
    padding: 0.3em 2em;
    margin: 3em 0 0 0;
    background-color: var(--col-cta-button-background);
    color: var(--col-cta-button);
    border: 0;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.5em !important;
}
.cta-button:hover {
    background-color: var(--col-cta-button-hover); /* var(--col-red); */
    color: var(--col-light);
}
.gform_button.cta-button {
    margin-top: 0;
}

/* 6D. PAGE TITLES              */


/* 6E. COLOUR BLOCKS            */

.entry .entry-content.colour-block--content { 
    padding-top: 3rem;
    margin-bottom: 3rem;
}

.entry .colour-block--content {
    /* Default to 1 column for mobile view, and open up 2-column styling on wider screens */
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    line-height: 1.5em;
}

.picture-credit-text {
    font-family: var(--font-ibm-plex-sans);
    font-size: 10pt;
    padding: 0px 10px;
    white-space: nowrap;
    background-color: var(--picture-border-col);
}

/*
.block-header:has(.block-header--stitch) ~ div.entry-content.colour-block--content {
    padding-top: 5rem;
} 
*/

.colour-block {
    background-color: var(--colour-block-bg-col);
    color: var(--colour-block-col);
}

.colour-block.lilac-block {
    --colour-block-bg-col: var(--col-lilac);
    --colour-block-col: var(--col-dark);
    --illustration-col: var(--col-purple);
    --block-header-background-col: var(--col-purple);

}

.colour-block.yellow-block {
    --colour-block-bg-col: var(--col-yellow);
    --colour-block-col: var(--col-dark);
    --picture-border-col: var(--col-green);
    --block-header-background-col: var(--col-red);
    --illustration-col: var(--col-green);
    --col-stitch: var(--col-purple);

    /* Redeclare the wrapping stitch superdefinition */
    --stitch-background-def: radial-gradient(circle closest-side,var(--col-stitch) 98%,#0000) 0 0/var(--stitch-width) 100%, linear-gradient(90deg,var(--col-stitch) 50%, #0000 0) calc(var(--stitch-width)/2) 0/calc(2*var(--stitch-width)) 100%;

    /* 
    --block-header-col: var(--col-dark); */
}

.colour-block.orange-block {
    --colour-block-bg-col: var(--col-orange);
    --colour-block-col: var(--col-dark);
    --block-header-background-col: var(--col-purple);
    --illustration-col: var(--col-yellow);
    --col-stitch: var(--col-light);
}

.colour-block.purple-block {
    --colour-block-bg-col: var(--col-purple);
    --colour-block-col: var(--col-light);
    --block-header-background-col: var(--col-red);
    --down-arrow-col: var(--col-orange);
    --col-cta-button: var(--col-dark);
	--col-cta-button-background: var(--col-yellow);
}

.colour-block.red-block {
    --colour-block-bg-col: var(--col-red);
    --colour-block-col: var(--col-light);
    --block-header-background-col: var(--col-purple);
    --col-stitch: var(--col-green);
    --col-cta-button: var(--col-dark);
	--col-cta-button-background: var(--col-yellow);
    --col-cta-button-hover: var(--col-purple);

    /* Redeclare the wrapping stitch superdefinition */
    --stitch-background-def: radial-gradient(circle closest-side,var(--col-stitch) 98%,#0000) 0 0/var(--stitch-width) 100%, linear-gradient(90deg,var(--col-stitch) 50%, #0000 0) calc(var(--stitch-width)/2) 0/calc(2*var(--stitch-width)) 100%;

}

.colour-block.green-block {
    --colour-block-bg-col: var(--col-green);
    --colour-block-col: var(--col-dark);
    --block-header-background-col: var(--col-purple);
    --illustration-col: var(--col-purple);
    --col-stitch: var(--col-yellow);

    /* Redeclare the wrapping stitch superdefinition */
    --stitch-background-def: radial-gradient(circle closest-side,var(--col-stitch) 98%,#0000) 0 0/var(--stitch-width) 100%, linear-gradient(90deg,var(--col-stitch) 50%, #0000 0) calc(var(--stitch-width)/2) 0/calc(2*var(--stitch-width)) 100%;

}

.colour-block.white-block {
    --colour-block-bg-col: var(--col-light);
    --colour-block-col: var(--col-dark);
    --block-header-background-col: var(--col-red);
    --col-stitch: var(--col-purple);

    /* Redeclare the wrapping stitch superdefinition */
    --stitch-background-def: radial-gradient(circle closest-side,var(--col-stitch) 98%,#0000) 0 0/var(--stitch-width) 100%, linear-gradient(90deg,var(--col-stitch) 50%, #0000 0) calc(var(--stitch-width)/2) 0/calc(2*var(--stitch-width)) 100%;
}

/* 6F. COLOUR BLOCK HEADERS */

.block-header {
    width: 100%;
    position: relative;
    padding-top: var(--rd-stitch-overlap);
}

.block-header--stitch {
    width: 100%;
    height: 3px;
	background: var(--stitch-background-def);
}

/* Move splash block upward */
.block-header__splash {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%) translateY(-50%);
}

/* Show text inside splash div */
.block-header--text {
    position: relative;
    padding: 8px 20px;
}
.block-header--text .heading-text {
    position: relative;
    z-index: 3;
    color: var(--block-header-col);
}
/* Skewed background colour splash */
.block-header--text::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--block-header-background-col);
    transform: rotate(-2.5deg);
    z-index: 2;
}
/* Allow overrides */
.splash-background--purple {
    --block-header-background-col: var(--col-purple);
}
.splash-background--lilac {
    --block-header-background-col: var(--col-lilac);
}
.splash-background--yellow {
    --block-header-background-col: var(--col-yellow);
}
.splash-background--orange {
    --block-header-background-col: var(--col-orange);
}
.splash-background--red {
    --block-header-background-col: var(--col-red);
}
.splash-background--green {
    --block-header-background-col: var(--col-green);
}
.splash-background--white {
    --block-header-background-col: var(--col-white);
}

/* DOWN ARROWS */

.down-arrow {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) translateY(50%);

    color: var(--down-arrow-col);
    font: var(--font-ibm-plex-serif-bold);
    font-size: 50pt;
}
/*
.down-arrow-red {
    color: --down-arrow-col
}
*/


/* 7. ARCHIVE                   */
.archive .entry-title {
	margin-bottom: 30px;
}

/* 8. HOMEPAGE COMPONENTS       */

@media only screen and (min-width: 768px) {
    .illustration {
        position: absolute;
        /* Default settings to show on left */
        --illustration-position-left: 0;
        --illustration-position-right: auto;
        --illustration-mask-position: left;
        --illustration-rotate: rotate(10deg);
        width: 300px;
        height: 400px;
        overflow: hidden;
    }
    .illustration.illustration-side-left {
        left: 0;
    }
    /* Override for right-aligned illustrations */
    .illustration.illustration-side-right {
        right: 0;
        --illustration-position-left: auto;
        --illustration-position-right: 0;
        --illustration-mask-position: right;
        --illustration-rotate: rotate(-10deg);
    }
    /* Load in SVGs as needed */
    .illustration--multimeter {
        --illustration-image: url('assets/img/illustration-multimeter.svg');
        --illustration-width: 200px;
        --illustration-height: 230px;
    }
    .illustration--safety-pin {
        --illustration-image: url('assets/img/illustration-safety-pin.svg');
        --illustration-width: 150px;
        --illustration-height: 260px;
    }
    .illustration--scissors {
        --illustration-image: url('assets/img/illustration-scissors.svg');
        --illustration-width: 240px;
        --illustration-height: 240px;
    }
    .illustration--screwdriver {
        --illustration-image: url('assets/img/illustration-screwdriver.svg');
        --illustration-width: 200px;
        --illustration-height: 325px;
    }
    .illustration--spanner {
        --illustration-image: url('assets/img/illustration-spanner.svg');
        --illustration-width: 175px;
        --illustration-height: 260px;
    }
    .illustration--thread {
        --illustration-image: url('assets/img/illustration-thread.svg');
        --illustration-width: 250px;
        --illustration-height: 250px;
    }

    /* Set up illustration background as mask */
    .illustration::before {
        content: "";
        position: absolute;
        width: var(--illustration-width);
        height: var(--illustration-height);
        top: 70px;
        left: var(--illustration-position-left);
        right: var(--illustration-position-right);
        z-index: 2;

        background-repeat: no-repeat;
        mask-position: var(--illustration-mask-position);
        background-size: contain;
        transform: var(--illustration-rotate);

        background-color: var(--illustration-col); /* @TODO Replace based on block and/or args */
        -webkit-mask-image:  var(--illustration-image);
        mask-image: var(--illustration-image);
        mask-repeat: no-repeat;
        mask-size: contain;
    }
}

/* Undo all the good work above if we're on a news page at medium resolution */
@media only screen and (max-width: 1167.99px) {
    .single-post .illustration:before {
        display: none;
    }
}

/* Title banner */

.title-banner {
    display: flex;
    justify-content: center;
    padding: 10% 0;
}
.title-banner img {
    height: 60vw;
    max-height: 150px;
    margin: 3vw 0;
}

/* Remove empty paragraphs created by WordPress */
p:empty { display:none; }


/* **** NEWS POSTS **** */

.entry .entry-content:has(.single-post-meta) {
    padding-top: 0;
    align-items: start;
}

.single-post-meta,
.single-post-meta .entry-title {
    text-align: left;
}

.post-date {
    font-family: var(--font-staatliches), sans-serif;
    font-size: 12pt;
    letter-spacing: 1px;
}

.single-post-meta .entry-title {
    font-size: 22pt;
}
.single-post-meta h2 {
    font-size: 18pt;
}
.single-post-meta h3,
.single-post-meta h4,
.single-post-meta h5,
.single-post-meta h6 {
    font-size: 16pt;
}

.single-post-meta h1,
.single-post-meta h2,
.single-post-meta h3,
.single-post-meta h4,
.single-post-meta h5,
.single-post-meta h6,
.single-post-meta .header-font {
    font-family: var(--font-ibm-plex-serif);
    line-height: 1.3em;
    text-align: left;
    margin: 16px 0;
}

@media only screen and (min-width: 768px) {
  .entry .single-post-meta .entry-title {
    margin-top: 0;
  }
}

/* Allow hero blocks to be full screen on small screens by default  */
@media only screen and (max-width: 767.99px) {
    .entry .entry-content:has(.post-hero-image-wrap),
    .entry .entry-summary:has(.post-hero-image-wrap) {
        max-width: 100%;
    }
}

.post-hero-image-wrap {
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
}
.post-hero-image {
    z-index: 1;
    width: 100%;
    height: auto;
    filter: grayscale(1) brightness(1.2);
}
/* Show "full" images with a max height but otherwise auto */
.entry .entry-content .post-hero-image-wrap--full {
    max-width: 750px;
}
.post-hero-image-wrap--full .post-hero-image {
    width: auto;
    height: auto;
    max-height: 500px;
    max-width: 100%;
}
/* Show "cropped" images with 100% width and cropped height */
.post-hero-image-wrap--cropped .post-hero-image {
    object-fit: cover;
    max-height: 300px;
}

/* Allow editors to select cropping position */
.post-hero-image-wrap--cropped-centre .post-hero-image {
    object-position: center center;
}
.post-hero-image-wrap--cropped-top .post-hero-image {
    object-position: center top;
}
.post-hero-image-wrap--cropped-bottom .post-hero-image {
    object-position: center bottom;
}


.post-hero-image-wrap:after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--colour-block-bg-col);
    mix-blend-mode: multiply;
}

.entry .entry-content.colour-block--content:has(.post-hero-image-wrap),
.colour-block:has(.post-hero-image-wrap) {
    padding: 0;
}


@media only screen and (min-width: 1168px) {
	.entry .entry-content:has(.post-hero-image-wrap) > div,
	.entry .entry-content:has(.post-hero-image-wrap) > article,
	.entry .entry-content:has(.post-hero-image-wrap) > section {
		padding: 0;
	}
}

.single-post-content {
    font-size: 12pt;
    font-weight: 400;
    position: relative;
    /* Display above illustrations */
    z-index: 3;

}

.single-post-content p {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    max-width: 650px;
}
.single-post-content p:first-child {
    font-size: 14pt;
}

.post-hero-credit {
  position: absolute;
  bottom: 0;
  right: 30px;
  z-index: 5;
  background-color: var(--col-green);
  transform: translateY(50%);
}
@media only screen and (max-width: 767.99px) {
    /* Give credit block a bit more room for longer text */
    .post-hero-credit {
        font-size: 8pt;
        right: 14px;
    }
} 

/* Gravity Form overrides */

.gform_wrapper.gravity-theme .gfield.field_sublabel_above .gfield_description {
    padding-top: 0;
    margin-top: 0;
}