/*
Theme Name: Black Wall Street Journey
Theme URI: https://blackwallstreetjourney.com/
Description: Bespoke WordPress theme for Black Wall Street Journey.
Version: 1.0.0
Author: Rick Lowe Studio
Author URI: https://www.ricklowe.com/
*/
/* CSS Reset */
*{ margin:0; padding:0; outline: none; box-sizing:border-box }
ul{list-style:none}

/* helper classes*/
@media(max-width:767px){ .hidden-sm { display: none } }
@media(min-width:768px){ .hidden-lg { display: none } }
a { max-width: 99%; overflow: hidden; display: inline-flex; text-overflow: ellipsis }

/* Layout */
section:not(.cover), header, footer { padding: 30px 16px 16px; max-width: 1150px; margin: 0 auto; scroll-margin-top: 70px }
body.page main section  { padding: 0px 16px 0px}

/*Typography */
html {font:16px sans-serif; overflow-x: hidden; scroll-behavior: smooth }
a {color:#000;text-decoration:none}
h1, h2 {padding-bottom: 30px; font-size: 1.9em }
@media(max-width:767px){ h1, h2 {font-size: 1.35em } } 
p, h3, .p {font-size: 1.15em; line-height: 1.5em; letter-spacing: 0.01em; word-spacing: 0.025em }
@media(max-width:767px){ p, h3, .p {font-size: 1.1em !important } }
p a { text-shadow: 0px 0px 0.5px #444; border-bottom:1px solid; font-size: 0.95em; white-space: nowrap}
p.small { font-size: 1.1em; padding: 0 4%;}
@media(max-width:767px){ p small { font-size: 0.75em !important; margin-top: -6px } }
p { margin-bottom: 16px }

main { padding-top: 175px }

/* Navigation */
header{ z-index: 1; display:flex; align-items:center; padding:6px 16px; position: fixed; min-width: 100%; background: #fff; border-bottom: 3px solid #000  }
header nav li{padding: 0 12px; letter-spacing:0.03em;text-shadow:0px 0px 0.25px #000;}

/* Hamburger Menu on Mobile */
header #menu{display:none}
header .menu::before{content:"\2630"; font-size: 48px}
header #menu:checked+.menu::before{content:"✕"; font-size:36px; margin-top:8px; display:block; padding-right: 6px; text-shadow: 0px 0px 0.75px #000;}

@media(max-width:991px){
	header nav{display:none}
	header .menu{z-index:2; cursor:pointer}
    header #menu:checked~nav{ display:grid;place-items:center; position:fixed;inset:0;background:#fff}
    header #menu:checked~nav ul{flex-direction:column;text-align:center;font-size:2rem;gap:2rem}
}
@media(min-width:992px){ 
	header .menu{display:none} 
	header nav{display:block}
	header { padding:12px 36px 12px 24px }
}

/* Ticker */
#ticker { overflow: clip }
#ticker iframe { border:0; margin-top: 0px;display: block; width: 100%; overflow: hidden; scrollbar-width: none; -ms-overflow-style: none }
/* @media(max-width:767px){ #ticker iframe { zoom: 1.29 } } */

/* video */
.video-container { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100% }

@media(min-width:768px){
	body.home section#about { display: flex }
	body.home section#about > div:nth-child(1) { flex-basis: 55%  }
	body.home section#about > div:nth-child(2) { flex-basis: 45%; padding-left: 48px }
}

/* Timeline */
#timeline img { max-width: 100%; padding: 12px 0px }
#timeline ol li { list-style: disc; margin-left: 10.4px; margin-bottom: 30px }
#timeline ol {margin-left: 7px;}
#timeline ol li time { font-size: 1.1em }
#timeline ol { overflow-x: auto }
#timeline ol::-webkit-scrollbar { height: 8px }
#timeline ol::-webkit-scrollbar-track { background: #eee }
#timeline ol::-webkit-scrollbar-thumb { background: #999 }
#timeline ol li a { display: block }
body.page #timeline ol { max-width: 750px; margin: 0 auto; overflow: visible }
	

@media(min-width:768px){ 
	#timeline ol li h3 { font-size: 1.1em; letter-spacing: -0.02em; white-space: nowrap; font-weight: 550;  word-spacing: -0.03em}
	body:not(.page) #timeline ol {display: flex; padding-left: 3px !important } 
	body:not(.page) #timeline ol li {flex: 1}
	body:not(.page) #timeline ol li:not(:last-child) {padding-right: 24px }
	body:not(.page) #timeline time {display:flex; align-items:center }
	body:not(.page) #timeline time:after {content:""; flex:1; height:1.5px; background:#000; margin-left:12px }
	body.page #timeline ol {border-left: 2px solid black; padding-left: 0px }
} 

@media(max-width:767px){
	#timeline ol {border-left: 2px solid black}
	#timeline ol { overflow: visible }
}

/* Lightbox Code */

body:has(.lightbox:target) { overflow: hidden; height: 100%}

@media(min-width:769px){ 
.lightbox:not(:target) p, .lightbox:not(:target) .counter { display: none }
.lightbox-close, .lightbox-prev, .lightbox-next  { display: none }
ul:has(.lightbox:target) .lightbox-close, ul:has(.lightbox:target) .lightbox-prev, ul:has(.lightbox:target) .lightbox-next  { display: block }
.lightbox:target { z-index: 12; cursor: default; display: flex; width: 100%; height: 100%; position: fixed; background: #000; top: 0; left: 0; justify-content: center; padding-top: 100px; padding-bottom: 100px; flex-direction: column }
.lightbox-close { width: 24px; height: 24px;  background: url('https://aliashe.com/blackwallstreetjourney/wp-content/themes/blackwallstreetjourney/images/lightbox-close.svg'); background-size: 100%; position: fixed; top: 30px; right: 120px; z-index: 13 !important }
.lightbox:target img { object-fit: contain !important; padding-bottom: 0px !important; aspect-ratio: auto !important; height: 100%}
.lightbox .caption { letter-spacing: 0.05em; color: #7DC553; width: 100%; text-align: center; font-size: 1em; padding-top: 12px; }
.lightbox p.caption small { color: #fff }
a.lightbox:not(:target) ~ a { display: none !important }
.lightbox .counter { color: #fff; width: 100%; text-align: center; font-size: 1.15em; word-spacing: 0.25em; }
.lightbox-prev, .lightbox-next { width: 32px; height: 27px;  background-size: 100%; position: fixed; top: 47.5%; z-index: 12 }
.lightbox-prev { background: url('https://aliashe.com/blackwallstreetjourney/wp-content/themes/blackwallstreetjourney/images/lightbox-prev.svg'); left: 120px; }
.lightbox-next { background: url('https://aliashe.com/blackwallstreetjourney/wp-content/themes/blackwallstreetjourney/images/lightbox-next.svg'); right: 120px; }
ul:has(.lightbox:target) + a.lightbox-close { display: block }
}

@media(max-width:768px){ 
	.lightbox p, .lightbox .counter { display: none }
	.lightbox-prev, .lightbox-next { display: none }
	ul:has(.lightbox:target) .lightbox-close { width: 24px; height: 24px; display: block; background: url('.../../images/lightbox-close.svg'); background-size: 100%; position: fixed; top: 30px; right: 24px; z-index: 13 }
	ul:has(.lightbox:target) { scroll-snap-type: x mandatory; gap: 12px;  flex-wrap: nowrap !important; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; overflow-x: auto !important; overflow-y: hidden; background: #000; z-index: 12}
	ul:has(.lightbox:target) li { scroll-snap-align: start; flex: 0 0 100vw !important; width: 100vw !important; padding: 0 !important; }
	ul:has(.lightbox:target) .lightbox { justify-content: center; display: flex; flex-direction: column; padding-top: 0px !important; padding-bottom: 96px; height: 100% }
	ul:has(.lightbox:target) .lightbox img {  padding-bottom: 0px !important; aspect-ratio: auto !important; width: 100vw !important; max-height: calc(100% - 260px) !important; object-fit: contain !important;}
	ul:has(.lightbox:target) .caption { display: block; letter-spacing: 0.05em; color: #7DC553; text-align: center; font-size: 0.95em !important; padding-top: 6px; }
	ul:has(.lightbox:target) p.caption small { color: #fff }
	.lightbox:target .counter { display: block; position: fixed; left: 0; bottom: 5px; width: 100%; color: #fff; width: 100%; text-align: center; font-size: 1.15em; word-spacing: 0.25em; }
}

/* Gallery */
#gallery ul { list-style: none !important }
#gallery img{ width: 100%; margin-bottom: 24px; aspect-ratio: 1 / 1; object-fit: cover; }

@media(min-width:768px){ 
	#gallery ul{display:flex; flex-wrap:wrap; width: calc(100% + 24px); }
	#gallery li { padding-right: 24px; width: 25% } 
	body:not(.page) #gallery li:nth-child(n+6) { display: none }
}

@media(max-width:767px){ 
	#gallery ul{display:flex; flex-wrap:wrap }
	#gallery li { width: 50% }
	#gallery li:nth-child(even) { padding-right: 12px }
	#gallery li:nth-child(odd) { padding-left: 12px }
}

/* Collaborators */
#collaborators ul li { margin-bottom: 24px }
#collaborators a { display: block;  overflow: hidden; text-overflow: ellipsis; width: 85%; white-space: nowrap }
@media(min-width:768px){ 
	#collaborators ul { display: flex;  flex-wrap:wrap; }
	#collaborators ul li { width: 25%}
}

/* Footer */
footer { border-top: 1px solid #222; padding-top: 48px; text-align: center; margin-top: 24px} 
footer nav ul { margin-top: 36px }
footer nav li { margin-bottom: 12px }


@media(min-width:768px){ 
	footer nav ul { display: flex; justify-content: center }
	footer nav li { padding-left: 48px }
}

/*About page*/

/* #about img { width: 100vw; height: auto } */
div[id^="attachment_"] { padding-top: 24px }
div[id^="attachment_"] { float: left; margin-right: 24px; }
div[id^="attachment_"].alignright { float: right; margin-left: 24px }
#about p { line-height: 1.75em; font-size: 1.2em; padding-top: 12px }
div[id^="attachment_"] p:first-of-type { display: none }
#about p.wp-caption-text { font-size: 0.9em; line-height: 1.2em; padding-top: 6px; opacity: 0.8 }

@media(max-width:768px){ 
div[id^="attachment_"] { width: 100% !important; text-align: center; margin: 0px !important; float: none !important }
div[id^="attachment_"] img { max-width: 100% }
}