/**
 * Post Styles
 *
 * Single post layout, comments, and related components.
 *
 * @package    Estylish
 * @author     Woracious
 * @since      1.0.0
 */

/*--------------------------------------------------------------
# Post Layout
--------------------------------------------------------------*/

.tost {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.tost h1 {
	font-weight: 500;
	text-align: center;
}

.taside {
	display: flex;
	gap: 30px;
}

.taside aside.large {
	flex: 0 0 250px;
}

.taside aside.small {
	flex: 1 1 100px;
	position: relative;
}

/*--------------------------------------------------------------
# Post Content
--------------------------------------------------------------*/

.tpost img {
	max-width: 100%;
}

.tpost {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.tpost p a {
	color: var(--theme);
	transition: all 0.3s ease;
}

.tpost p a:hover {
	border: 2px solid var(--theme);
	background-color: var(--theme);
	border-radius: 55px 25px;
	padding: 5px 10px;
	font-weight: bold;
	color: #ffffff;
}

/*--------------------------------------------------------------
# Share Buttons
--------------------------------------------------------------*/

.sonchor {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	position: -webkit-sticky;
	position: sticky;
	top: 50px;
}

.sonchor a {
	display: flex;
	gap: 2px;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	transition: transform 0.5s ease;
}

.sonchor a:hover {
	transform: rotate(45deg);
}

.sonchor a svg {
	width: 35px;
}

.sonchor .share {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 5px;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	transform: rotate(180deg);
	font-size: 1.1rem;
	letter-spacing: 4px;
	text-transform: uppercase;
	font-weight: 700;
	transition: transform 0.3s ease;
}

.sonchor .share:hover {
	transform: rotate(200deg);
}

.sonchor a.twitter {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
}

/*--------------------------------------------------------------
# Category Widget
--------------------------------------------------------------*/

.widgetcat {
	display: flex;
	gap: 25px;
	justify-content: center;
	flex-wrap: wrap;
}

.widgetcat a {
	font-size: 1.1rem;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	padding: 10px 20px;
	letter-spacing: 2px;
	border: 2px solid #000000;
}

.tpost .widgetcat a:nth-child(2) {
	background-color: #000000;
	color: #ffffff;
}

.tpost .widgetcat {
	justify-content: center;
	gap: 40px;
}

.widgetcat a:hover {
	background-color: #000000;
	color: #ffffff;
}

.tpost .widgetcat a:hover:nth-child(2) {
	background-color: #ffffff;
	color: #000000;
}

.badius {
	border-radius: 55px 25px;
}

/*--------------------------------------------------------------
# Comments Section
--------------------------------------------------------------*/

.postcomments {
	display: flex;
	gap: 30px;
	justify-content: space-between;
}

/*--------------------------------------------------------------
# Comment Form
--------------------------------------------------------------*/

.comform {
	flex: 0 1 40%;
	display: flex;
	flex-direction: column;
	gap: 40px;
	position: sticky;
	top: 0;
	align-self: flex-start;
	background-color: #fff6db;
	padding: 20px;
}

.comform h6 {
	letter-spacing: 0.1rem;
	text-transform: uppercase;
	font-family: var(--sourcesans);
}

.comform input,
.comform textarea {
	padding: 10px 20px;
	border: 2px solid var(--grey1);
	font-size: 1.3em;
}

.comform input[type="submit"] {
	border: 2px solid var(--theme);
	background-color: var(--theme);
	padding: 5px 20px;
	max-width: 250px;
	margin: auto;
	font-weight: 700;
	color: #ffffff;
}

.comform input[type="submit"]:hover {
	background-color: #ffffff;
	color: var(--theme);
}

/*--------------------------------------------------------------
# Comment List
--------------------------------------------------------------*/

.comlist {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.comlist h3 {
	position: relative;
	display: flex;
	gap: 10px;
	margin-right: auto;
}

.comlist .comcount {
	position: absolute;
	font-size: 2rem;
	right: -40px;
}

/*--------------------------------------------------------------
# Comment Box
--------------------------------------------------------------*/

.combox {
	display: flex;
	gap: 20px;
	padding: 20px;
	background-color: var(--color4);
}

.combox .col-1 {
	flex: 0 0 50px;
}

.combox .col-1 img {
	width: 100%;
	border-radius: 50%;
}

.combox .col-2 .row-2 {
	margin: 15px auto;
}

.combox .col-2 button {
	padding: 3px 7px;
	font-weight: bold;
	background-color: var(--color2);
	border: 2px solid #4a4949;
	color: #4a4949;
}

.combox .col-2 button:hover {
	background-color: #4a4949;
	color: #ffffff;
}

.combox .col-2 .row-1 span:nth-child(2) {
	margin-left: 10px;
	font-size: 0.9rem;
}

/*--------------------------------------------------------------
# WordPress Block Overrides
--------------------------------------------------------------*/

.taside.wp-block-columns {
	display: flex;
	flex-wrap: nowrap;
	gap: 30px;
}

.taside > .wp-block-column.small {
	flex: 0 0 60px;
	min-width: 60px;
	max-width: 60px;
}

.taside > .wp-block-column.tpost {
	flex: 1 1 auto;
	max-width: none;
}

.taside > .wp-block-column.large {
	flex: 0 0 250px;
	min-width: 250px;
	max-width: 250px;
}