/*
Theme Name: ImageCom Press
Theme URI: https://imagecom.press/
Description: A purpose-built GeneratePress child theme for the ImageCom.press browser-based image compression tool.
Author: Markyboy
Author URI: https://markyboy.co.uk/
Template: generatepress
Version: 1.0.1
Text Domain: imagecom-press
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
	--imagecom-ink: #07111f;
	--imagecom-purple: #7357ff;
	--imagecom-cyan: #4de8cf;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	text-underline-offset: 0.18em;
}

/*
 * Site-wide ImageCom.press branding.
 *
 * The wordmark is generated in functions.php so it remains sharp at every
 * screen size and does not depend on the old white-background logo image.
 */
.site-header {
	background: var(--imagecom-ink);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.site-header .inside-header {
	padding-top: 16px;
	padding-bottom: 16px;
}

.imagecom-site-logo a {
	display: inline-flex;
	align-items: center;
	color: #fff;
	text-decoration: none;
}

.imagecom-logo-mark {
	display: inline-flex;
	align-items: center;
	gap: 11px;
}

.imagecom-logo-icon {
	display: grid;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 11px;
	background: linear-gradient(145deg, #7357ff, #5a3cf0);
	box-shadow: 0 9px 24px rgba(90, 60, 240, 0.27);
}

.imagecom-logo-icon svg {
	display: block;
	width: 21px;
	height: 21px;
}

.imagecom-logo-type {
	display: inline-flex;
	align-items: baseline;
	color: #fff;
	font-size: clamp(20px, 2vw, 25px);
	font-weight: 850;
	letter-spacing: -0.052em;
	line-height: 1;
}

.imagecom-logo-type em {
	color: var(--imagecom-cyan);
	font-style: normal;
	font-weight: 780;
}

.imagecom-site-logo a:hover .imagecom-logo-type em,
.imagecom-site-logo a:focus .imagecom-logo-type em {
	color: #fff;
}

.site-header .main-title a,
.site-header .site-description,
.site-header .main-navigation .main-nav ul li a,
.site-header .menu-toggle,
.site-header .menu-bar-items {
	color: #fff;
}

.site-header .main-navigation,
.site-header .main-navigation ul ul {
	background: transparent;
}

.site-header .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.site-header .main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.site-header .main-navigation .main-nav ul li[class*="current-menu-"] > a {
	background: transparent;
	color: var(--imagecom-cyan);
}

/*
 * Footer widgets and legal/network line.
 */
.site-footer,
.footer-widgets,
.footer-widgets-container {
	background: var(--imagecom-ink);
	color: rgba(255, 255, 255, 0.72);
}

.footer-widgets {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-widgets-container {
	padding-top: 46px;
	padding-bottom: 46px;
}

.footer-widgets .widget,
.footer-widgets .widget p,
.footer-widgets .widget li {
	color: rgba(255, 255, 255, 0.68);
}

.footer-widgets .widget-title {
	margin-bottom: 18px;
	color: #fff;
	font-size: 15px;
	font-weight: 850;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.footer-widgets a {
	color: rgba(255, 255, 255, 0.78);
	font-weight: 650;
	text-decoration: none;
}

.footer-widgets a:hover,
.footer-widgets a:focus {
	color: var(--imagecom-cyan);
	text-decoration: underline;
}

.site-info {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	background: #050b14;
	color: rgba(255, 255, 255, 0.68);
}

.site-info .inside-site-info {
	padding-top: 22px;
	padding-bottom: 22px;
}

.site-info .copyright-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 7px 10px;
	font-size: 14px;
	line-height: 1.6;
}

.imagecom-copyright-owner {
	color: #fff;
	font-weight: 760;
}

.imagecom-copyright-separator {
	color: rgba(255, 255, 255, 0.28);
}

.site-info .imagecom-network-link {
	color: rgba(255, 255, 255, 0.76);
	text-decoration: none;
}

.site-info .imagecom-network-link:hover,
.site-info .imagecom-network-link:focus {
	color: var(--imagecom-cyan);
	text-decoration: underline;
}

@media (max-width: 768px) {
	.imagecom-logo-icon {
		width: 34px;
		height: 34px;
		flex-basis: 34px;
	}

	.imagecom-logo-type {
		font-size: 21px;
	}

	.footer-widgets-container {
		padding-top: 36px;
		padding-bottom: 36px;
	}

	.site-info .copyright-bar {
		gap: 5px 8px;
		text-align: center;
	}
}