/*
Theme Name: Hidden Voices
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: 
*/

:root{
	--plyr-color-main:#fff;
}


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

html, body { width:100%;margin:0;padding:0;overflow-x:hidden;font-family:"inter", sans-serif; }
body.black { background:#000;color:#fff; }

img { display:block; }

.m-grid { margin:0; }

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


.vertical-align { display:block;top:0;left:0;width:100%;height:100%; }
.vertical-outer { display:table;width:100%;height:100%;vertical-align: middle;  }
.vertical-inner { display:table-cell;width:100%;height:100%;vertical-align: middle; }

p, ul { font-weight:300; }
h1,h2,h3,h4,h5,h6 { font-family: 'IBM Plex Sans', sans-serif;font-weight:300; }
h2 { font-size:1.1rem;font-weight:400; }

p a { color:#000;text-decoration:underline;opacity:0.5; }
p a:hover { opacity:1; }
.black p a { color:#fff; }

#loadmore, a.button { transition:all 0.3s ease-in-out;display:inline-block;padding:10px 20px;text-transform:uppercase;background:transparent;color:#000;text-decoration:none;border:1px solid #000; }
#loadmore:hover, a.button:hover { background:#000;color:#fff; }
.pagination { text-align:center;padding:15px; }

/* ===== NAV MENU ===== */
nav { padding:30px 0px;background:#fff;position:relative;z-index:2; }
body.black .nav, body.black nav { background:#000; }
body.black nav svg path { fill:#fff; }
#navmenu { width:calc(100% - 280px);display:inline-block;text-align:right;vertical-align:middle; }
#navmenu .menu { list-style: none;padding:0;margin:0;width:100%;z-index:100;position:relative; }
#navmenu .menu li { display:inline-block;text-align:center;padding:2px 20px;position:relative; }
#navmenu .menu li::after { position:absolute;top:0;right:0;height:100%;width:1px;display:block;content:"";background:#000; }
body.black #navmenu .menu li::after  { background:#fff; }
#navmenu .menu li:last-child::after { display:none; }
#navmenu .menu li a { color:#000;text-decoration:none;transition:opacity 0.4s ease-in-out; }
body.black #navmenu .menu li a { color:#fff; }
#navmenu .menu li a:hover { opacity:0.3; }
#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; }

.nav-logo { width:280px;display:inline-block;vertical-align:middle; }

/*.mobile-toggle { width:30px;height:30px;display:none; }
.toggle-bar { width:100%;height:3px;margin-bottom:5px;background:#000; }
.mobile-toggle.active .toggle-bar { background:#666; }*/

footer { background:#000;text-align:center;padding:90px 30px; }
footer img { display:inline-block; }
#footermenu .menu { list-style: none;padding:0;margin:0; }
.footer-link { color:#fff;font-size:0.8rem; }
.footer-link:hover { opacity:0.5; }

/* === HOME === */
.home { padding-top:70vh; }
.home-banner { position:absolute;top:0;left:0;width:100%;height:70vh;overflow:hidden;z-index:1;}
.home-banner-background, .home-banner-foreground,.home-banner-logo { position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover; }
.home-banner-foreground { z-index:2; }
.home-banner-logo { object-fit:contain;padding:40px;position:fixed;height:70vh;z-index:1; }
.home-body { background:#fff;position:relative;z-index:2; }
.home-video { position:relative;z-index:2;background:#000;margin-bottom:60px; }
/*.home-video iframe { max-height:900px;width:100%; }*/
.plyr--video { max-width:1600px;margin:0 auto }
.video-preview { position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;filter:brightness(0.25); }

.home-play-button { width: 0px;height: 0px;border-style: solid;border-width: 50px 0 50px 100px;border-color: transparent transparent transparent #FFFFFF;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); }
.home-play-button:hover { opacity:0.5; }

.blog-post-title { color:#000;text-decoration:none;border-left:2px solid #000;display:inline-block;padding:0px 15px;margin:30px 0 0px; }
.blog-post-title h3, .blog-post-title h4 { margin:0;font-weight:300; }
.blog-post-title h3 { margin-bottom:10px;font-size:1.5rem; }
.blog-post-title h4 span { font-size:0.9rem;padding-top:5px;display:inline-block; }
.blog-post-image-link, .blog-post-image-link img { display:block;width:100%;object-fit:cover; }
.blog-post-thumbnail { aspect-ratio:1920/1290;-webkit-mask-image: url(/wp-content/themes/arch_voices/img/imagemask.svg);
  mask-image: url(/wp-content/themes/arch_voices/img/imagemask.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size:cover;
  mask-size:cover; }
.blog-post-thumbnail img { width:100%;height:100%;object-fit:cover; }

.blog-grid { width:100%;display:block; }
.gutter-sizer { width:30px; }
.blog-post { margin-bottom:30px; }
.blog-sizer, .blog-post.small { width:calc(33% - 30px); }
.blog-post.large { width:calc(66% - 30px); }
.blog-post .blog-post-image-link { position:relative;top:15px;transition:top 0.3s ease-in-out; }
.blog-post:hover .blog-post-image-link { top:-5px; }

.home-intro { padding:0px 0 60px;width:100%;max-width:768px; }
.home-intro p:first-child { margin-top:0; }


/* === COUNTRIES === */
.cat-grid-sizer { width:50%; }
.cat-grid-gutter { width:30px; }
.cat-grid { position:relative;left:15px; }
.cat-grid-item { position:relative;width:calc(50% - 30px); }
.cat-grid-item a { color:#fff;text-decoration:none; }
.cat-grid-item a span { position:absolute;bottom:30px;left:30px;text-transform:uppercase;font-size:1.5rem;font-family: 'IBM Plex Sans', sans-serif;font-weight:300; }
.cat-grid-item img { max-width:100%;display:inline-block;transition:opacity 0.4s ease-in-out; }
.cat-grid-item-wrapper { position:relative;display:inline-block; }
.cat-grid-item.right-align { text-align:right; }
.gradient-overlay { position:absolute;bottom:0;left:0;width:100%;height:50%;display:block;background:linear-gradient(0deg, rgba(0,0,0,0.6), rgba(0,0,0,0)); }
.cat-grid-item:hover img {opacity:0.6;}

.countries-introduction { padding:30px 0 60px;width:100%;max-width:600px; }



/* === CATEGORY ARCHIVE === */
h1 { text-align:center;position:relative;padding-bottom:80px;text-transform:uppercase;font-size:3.5rem;font-weight:300; }
h1::after { display:block;width:1px;background:#000;height:50px;content:"";position:absolute;bottom:0%;left:50%;margin-left:1px; }




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


.image-mask-holder { position:relative;  
	-webkit-mask-image: url(/wp-content/themes/arch_voices/img/imagemask.svg);
  mask-image: url(/wp-content/themes/arch_voices/img/imagemask.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size:cover;
  mask-size:cover;
  display:inline-block; }
  .image-column { margin-bottom:30px; }

.caption { font-size:2.2rem;width:100%;max-width:450px;position:relative;display:block;margin:-13% 0 0 auto;font-family: 'IBM Plex Sans', sans-serif;font-weight:300; }
.caption::before { content:"";display:block;background:#000;width:2px;height:100px;top:0;left:-15px;position:absolute; }


.wp-block-image {  }



/* Banner */
.banner-overlay { background:rgba(0,0,0,0.4); }


/* Video */
/*.plyr__control--overlaid { background:rgba(0,0,0,0.6); }
.plyr--full-ui input[type=range] { color:#fff; }
.plyr--video .plyr__control.plyr__tab-focus, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true] { background:#fff; }
*/
.placeholder { opacity:0.1; }
.masked-image { aspect-ratio:1920/1290;object-fit:cover;width:100%; }

@media(max-width:1200px){
	.home { padding-top:50vh; }
	.home-banner, .home-banner-logo { height:50vh; }
}

@media(max-width:991px){
	.caption { font-size:1.8rem;max-width:300px; }
	.home { padding-top:45vh; }
	.home-banner, .home-banner-logo { height:45vh; }
}

/* Tablet Size */
@media(max-width:768px){
	/* Move this to it's own query if it needs to break down earlier */
/*		.mobile-toggle { display:inline-block; }
		#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; }*/
	/* ---------------------- */

	#navmenu, .nav-logo { width:100%;text-align:center; }
	.nav-logo { margin-bottom:30px; }

	.blog-sizer, .blog-post.small { width:calc(50% - 15px); }
	.blog-post.large { width:calc(50% - 15px); } 
		.home { padding-top:35vh; }
	.home-banner, .home-banner-logo { height:35vh; }
	.cat-grid-item a span { font-size:1.2rem; }
	.home-intro { columns:1;padding:0px 0 60px; }
	.home-banner-foreground { display:none; }
}

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

	.blog-sizer, .blog-post.small { width:calc(100% - 15px); }
	.blog-post.large { width:calc(100% - 15px); } 
		.home { padding-top:25vh; }
	.home-banner, .home-banner-logo { height:25vh; }
	.cat-grid-item a span { font-size:1rem; }
}