@charset "UTF-8";
/*
Theme Name: Zosia
Theme URI: http://www.3forty.media/zosia
Author: 3FortyMedia
Author URI: http://www.3forty.media
Description: Zosia - Personal WordPress Blog Theme
Version: 1.2.5
Text Domain: zosia
*/

/* Minimal home subset of style.css for Tailwind loop pages. */

/* -------------------------------------------------------------------------- */
/*	0. CSS Variables
/* -------------------------------------------------------------------------- */

:root {

	/* Core colors */
	--white:  #ffffff;
	--black:  #000000;
	--very-dark-grey:  #131315;
	--dark-grey: #44464b;
	--medium-grey:  #94979e;
	--light-grey: #cfd0d2;
	--very-light-grey: #f2f2f3;
	--off-white: #f7f8fa;

	--site-width: 1200px;
	--site-max-width: calc(var(--site-width) + ( var(--post-margin) * 2));
	--mobile-site-max-width: calc(var(--content-max-width) + ( var(--post-margin) * 2));
	--body-background: #ffffff;
	--body-font-color: var(--very-dark-grey);
	--body-font-size: 1rem;
	--h1-font-size: 3.2rem;
	--h2-font-size: 2.25rem;
	--h3-font-size: 1.875rem;
	--h4-font-size: 1.5rem;
	--h5-font-size: 1.25rem;
	--h6-font-size: 1.1rem;
	--heading-font-weight:  700;

	/* Header */
	--header-background: var(--body-background);
	--header-width: var(--site-max-width);
	--custom-logo-width: auto;

	/* Footer */
	--footer-background: none;

	/* Sidebar */
	--sidebar-width: calc(300px + ( var(--post-margin) * 2));
	--toggle-sidebar-background: #ffffff;
	--toggle-sidebar-border-color:  var(--very-light-grey);
	--toggle-sidebar-logo-color:  var(--logo-color);
	--toggle-sidebar-link-color: inherit;

	/* Posts */
	--post-margin: 1.5625rem;
	--post-inner-elements-margin:  2rem;
	--post-thumbnail-border-radius: 0;
	--cols-4-small-desktop-flex-basis: calc(100% / 3 - (var(--post-margin) * 2));
	--cols-5-small-desktop-flex-basis: calc(100% / 4 - (var(--cols-5-post-margin) * 2));
	--cols-6-small-desktop-flex-basis: calc(100% / 4 - (var(--cols-5-post-margin) * 2));
	--cols-7-small-desktop-flex-basis: calc(100% / 4 - (var(--cols-5-post-margin) * 2));
	--cols-5-post-margin: calc(var(--post-margin) / 1.5);
	--cols-6-post-margin: calc(var(--post-margin) / 1.5);
	--cols-7-post-margin: calc(var(--post-margin) / 1.5);
	--cols-6-breakpoint-flex-basis: calc(100% / 5 - (var(--cols-5-post-margin) * 2));
	--cols-7-breakpoint-flex-basis: calc(100% / 6 - (var(--cols-6-post-margin) * 2));

	/* Cover global styling  */
	--cover-global-color: #ffffff;
	--cover-brightness-filter: 75%;
	--cover-overlay-gradient: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0));

	--link-color: var(--secondary-theme-color);
	--link-hover-color: var(--secondary-theme-color);
	--link-text-decoration: underline solid var(--link-color) 2px;
	--link-hover-text-decoration: underline solid var(--link-hover-color) 2px;
	--content-width:  calc(100% - (var(--post-margin) * 2));
	--content-max-width:  46rem;
	--mobile-content-width: calc(var(--content-max-width) + ( var(--post-margin) * 2));
	--thumbnail-hero-padding:  40%;
	--thumbnail-wide-padding: 56.25%;
	--thumbnail-landscape-padding: 66.75%;
	--thumbnail-square-padding: 100%;
	--thumbnail-portrait-padding: 149.88%;

	/* Misc Globals */
	--single-body-background: var(--body-background);
	--single-entry-font-size:  1.1875rem;
	--global-elements-margin: 1.5625rem; /* Usually the same as post margin */
	--global-elements-border-radius:  0;
	--button-background:  var(--primary-theme-color);
	--button-color:  var(--white);
	--button-border-radius: 0;
	--input-border-radius:  25px;
	--button-padding:  1rem 1.5rem;
	--button-font: var(--body-font);
	--button-font-size: 13px;
	--default-content-margin: 1.5rem;
	--heading-margin:  1.5rem 0;
	--post-grid-entry-header-flex-gap: 1rem;
}

/* -------------------------------------------------------------------------- */
/*	1. Document Setup
/* -------------------------------------------------------------------------- */

html {
	font-size: 100%;
}

body {
	direction: ltr;
	background: var(--body-background);
	color: var(--body-font-color);
	font-family: var(--body-font, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif);
	font-size: var(--body-font-size);
	font-weight: 400;
	letter-spacing: var(--body-letter-spacing);
	text-align: left;
	overflow-x: hidden;
}

* {
	box-sizing: border-box;
}

/* Base Transitions -------------------------- */

a,
path {
	transition: all 0.2s linear;
}

/* Screen Reader Text ------------------------ */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
	word-break: normal;
}

.screen-reader-text:focus {
	background-color: var(--very-light-grey);
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	-webkit-clip-path: none;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	right: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* -------------------------------------------------------------------------- */
/*	2. Element Base
/* -------------------------------------------------------------------------- */

main {
	display: block;
	flex-basis: 100%;
	margin-top: var(--global-elements-margin);
	margin-bottom: calc(var(--global-elements-margin) * 2);
}

/* -------------------------------------------------------------------------- */
/*	3. Layout
/* -------------------------------------------------------------------------- */

.wrap {
	margin: auto;
	position: relative;
}

.wrap-inner {
	max-width: var(--site-max-width);
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	min-height: calc(100vh - 380px); /* Push footer to bottom of screen */
}

.content-area {
	width: 100%;
	max-width: var(--site-max-width);
	margin-left: auto;
	margin-right: auto;
}

.aside-sidebar {
	width: calc(var(--sidebar-width) - var(--post-margin));
	padding-top: var(--post-margin);
	padding-left: var(--post-margin);
	margin-right: var(--post-margin);
	margin-top: var(--post-margin);
	margin-bottom: calc(var(--global-elements-margin) * 2);
	position: relative;
}

.has-sidebar main {
	flex-basis: calc(100% - var(--sidebar-width));
}

.toggle-sidebar {
	width: 100%;
	max-width: var(--toggle-sidebar-max-width, 380px);
	height: 100%;
	overflow: auto;
	overflow-x: hidden;
	background: var(--toggle-sidebar-background);
	color:  var(--toggle-sidebar-color);
	position: fixed;
	top: 0;
	left: -460px;
	transition: all 0.4s ease;
	z-index: 2000;
	box-shadow: var(--toggle-sidebar-box-shadow, 0 5px 15px rgba(0,0,0,0.1));
}

.toggle-sidebar.show {
	left: 0;
	z-index: 4000;
}

.admin-bar .toggle-sidebar {
	padding-top: 30px;
}

.toggle-sidebar > *,
.toggle-sidebar .widget {
	margin: 1.875rem;
	display: block;
	width: auto;
	max-width: 100%;
}

/* Toggle Menu (Sidebar) ---------------------------- */

.toggle-sidebar .close-menu {
	display: block;
	text-align: right;
	position: relative;
	font-size: 0.875rem;
	margin-left: auto;
}

.toggle-sidebar .close-menu span {
	cursor: pointer;
}

/* Search ---------------------------- */

.site-search {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2000;
	padding-top: calc(50vh - 100px);
	display: none;
	color: var(--very-dark-grey);
}

.site-search-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: auto;
}

.site-search::before {
	content: '';
	background: var(--body-fade-background, var(--body-background));
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0;
	z-index: -1;
	opacity: 0.96;
}

.site-search .close-menu {
	text-align: left;
	margin-left: auto;
	position: absolute;
	top: -50px;
	right: 0;
}

.site-search-wrapper > * {
	display: flex;
	width: var(--content-width);
	max-width: var(--content-max-width);
}

.site-search .search-form input {
	-webkit-appearance: none;
	-moz-appearance: none;
	background: var(--white);
	border-style: solid;
	border-width: 1px;
	border-color: var(--light-grey);
	box-shadow: none;
	display: block;
	font-size: var(--input-font-size, 0.9375rem);
	letter-spacing: var(--input-letter-spacing, -0.015em);
	margin: 0;
	max-width: 100%;
	padding: var(--input-padding, 0.875rem 1rem);
	width: 100%;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-right: 0;
}

.site-search .search-form input:focus {
	outline: none;
}

.site-search .search-submit {
	-webkit-appearance: none;
	-moz-appearance: none;
	border-radius: var(--input-border-radius);
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	background: var(--white);
	border: 1px solid var(--light-grey);
	border-left: 0;
	color: var(--medium-grey);
	padding: var(--input-padding, 0.875rem 1rem);
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/* Header ------------------------------------- */

.site-header {
	background: var(--header-background);
	box-shadow: var(--header-box-shadow, none);
	border-bottom: var(--header-border, 0);
	color: var(--body-color);
	padding: var(--header-padding, 1.25rem);
	padding-left: 0;
	padding-right: 0;
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 200;
}

.site-header.fullwidth {
	padding-left: var(--global-elements-margin);
	padding-right:  var(--global-elements-margin);
}

.header-layout-wrapper {
	width: 100%;
	max-width: var(--header-width);
	padding-left: var(--post-margin);
	padding-right: var(--post-margin);
}

.fullwidth .header-layout-wrapper {
	max-width: 100%;
}

/* Site Footer ------------------------------------- */

.site-footer {
	background:  var(--footer-background);
	color: var(--footer-color);
}

.site-footer-inner {
	max-width: var(--site-max-width);
	margin: auto;
	padding: calc(var(--global-elements-margin) * 2) var(--global-elements-margin);
}

.footer-nav {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-nav li {
	margin: 0;
	float: left;
}

.footer-bottom {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: var(--global-elements-margin) 0;
}

/* -------------------------------------------------------------------------- */
/*	5. Widgets
/* -------------------------------------------------------------------------- */

.widget {
	margin: var(--post-margin) 0;
	display: inline-block;
	width: 100%;
}

.aside-sidebar .widget:first-child {
	margin-top: 0;
}

.aside-sidebar .widget:last-child {
	margin-bottom: 0;
}

.widget-title,
.widgettitle {
	margin-top: 0;
	line-height: 1.1;
}

.widget ul,
.widget ol {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.widget > ul > li,
.widget > ol > li,
.widget > div > ul > li {
	margin: 0;
	display: block;
}

.widget ul li a,
.widget ol li a {
	display: inline-block;
	padding: 0.625rem 0;
}

.widget .sub-menu li,
.widget .children li {
	margin: 0;
}

.aside-sticky-container {
	position: sticky;
	top: 7rem;
}

/* -------------------------------------------------------------------------- */
/*	6. Misc.
/* -------------------------------------------------------------------------- */

.body-fade {
	position: fixed;
	top: 0;
	height: 100%;
	width: 100%;
	background: var(--body-fade-background, var(--body-background));
	opacity: 0.86;
	display: none;
	z-index: 1500;
}

.mobile-only {
	display: none;
	visibility: hidden;
}

.hidden {
	display: none;
}

.zosia-jobs-sort {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27 fill=%27none%27 stroke=%27%236b7280%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 8l4 4 4-4%27/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 16px 16px;
	background-position: right 12px center;
}

/* -------------------------------------------------------------------------- */
/*	7. Media Queries
/* -------------------------------------------------------------------------- */

@media (max-width:1060px) {
	.content-area,
	.site-footer-inner,
	.footer-bottom {
		max-width: var(--mobile-site-max-width);
	}
	.site-header {
		padding: 0;
	}
	.site-header.sticky-mobile-nav {
		position: sticky;
		top: 0;
		margin: 0 !important;
	}
	.admin-bar .site-header.sticky-mobile-nav {
		top: 32px;
	}
	body.has-sticky-nav-mobile {
		margin-top: 0 !important;
	}
	.mobile-header {
		display: flex;
		max-width: var(--mobile-site-max-width);
	}
	.site-header.logo-left-menu-right .mobile-header .site-logo,
	.site-header.logo-left-menu-right .mobile-header .site-title {
		margin-right: auto;
	}
	.site-header .header-layout-wrapper,
	.lbn-site-title-wrapper {
		display: none;
	}
	.site-title {
		font-size: var(--large-mobile-logo-font-size);
	}
}

@media (max-width: 1060px) {
	.mobile-only {
		display: inline-block !important;
		visibility: visible;
	}
	.toggle-sidebar .primary-nav-sidebar-wrapper.mobile-only {
		display: block !important;
	}
	/* With sidebar layout */
	.has-sidebar main {
		flex-basis: 100%;
		border-bottom: 1px solid var(--very-light-grey);
		padding-bottom: var(--post-margin);
	}
	.aside-sidebar {
		width: var(--content-width);
		max-width: var(--content-max-width);
		margin-left: auto;
		margin-right: auto;
		padding: 0 !important;
		margin-top: 0 !important;
	}
}

@media (max-width:540px) {
	.footer-bottom {
		flex-direction: column;
	}
	.footer-bottom > *:not(:last-child) {
		margin: 0 0 1rem 0;
	}
}