/*
Theme Name: ECU.org.ua Twenty Seventeen Child
Theme URI: https://ecu.org.ua/
Description: Update-safe layout adjustments for ECU.org.ua based on Twenty Seventeen.
Author: ECU.org.ua
Template: twentyseventeen
Version: 1.3.3
Text Domain: ecu-twentyseventeen-child
*/

/* Compact contact hero. The uploaded header image remains saved in WordPress,
 * but a local CSS background is used on the site. */
.custom-header-media {
	background-color: #07111f;
	background-image:
		radial-gradient(circle at 78% 22%, rgba(42, 171, 238, 0.24), transparent 28%),
		radial-gradient(circle at 18% 82%, rgba(76, 98, 255, 0.18), transparent 32%),
		linear-gradient(135deg, #050b14 0%, #0b1728 52%, #071e32 100%);
}

.custom-header-media:before {
	background: linear-gradient(90deg, rgba(5, 11, 20, 0.18), rgba(5, 11, 20, 0.62));
	height: 100%;
}

.custom-header-media:after {
	background-image:
		linear-gradient(rgba(90, 180, 255, 0.055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(90, 180, 255, 0.055) 1px, transparent 1px);
	background-size: 32px 32px;
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}

.custom-header-media img,
.custom-header-media video,
.custom-header-media iframe,
.wp-custom-header-video-button {
	display: none !important;
}

.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header {
	height: 260px;
	height: clamp(240px, 34vh, 280px);
}

.site-branding .site-title {
	font-size: 22px;
	font-size: 1.375rem;
	letter-spacing: 0.055em;
	line-height: 1.2;
}

.site-branding .site-description {
	font-size: 13px;
	font-size: 0.8125rem;
	line-height: 1.4;
	margin-top: 0.35em;
}

.ecu-header-contacts {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.8rem;
}

.site-branding .ecu-header-contact {
	align-items: center;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	color: #fff;
	display: inline-flex;
	font-size: 15px;
	font-weight: 700;
	height: 40px;
	justify-content: center;
	line-height: 1;
	min-width: 40px;
	padding: 0 0.72rem;
	text-decoration: none;
}

.site-branding .ecu-header-contact:hover,
.site-branding .ecu-header-contact:focus {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.72);
	opacity: 1;
}

.site-branding .ecu-header-contact:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.site-branding .ecu-header-phone {
	background: #0d76b0;
	border-color: #55bcf5;
	letter-spacing: 0.02em;
}

.site-branding .ecu-header-viber {
	background: #7360f2;
	border-color: #a69bff;
}

.site-branding .ecu-header-telegram {
	background: #2aabee;
	border-color: #7bd0f8;
}

.ecu-header-contact svg {
	fill: currentColor;
	height: 21px;
	width: 21px;
}

.ecu-header-phone svg {
	margin-right: 0.42rem;
}

/* Bring the first post closer to the header on the posts home page. */
body.home.blog .site-content {
	padding-top: 2.25em;
}

/*
 * Remove the visual "Posts"/"Записи" column while retaining its heading for
 * assistive technologies.
 */
body.home.blog .page-header {
	clip-path: inset(50%);
	float: none;
	height: 1px;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	white-space: nowrap;
	width: 1px;
	word-break: normal !important;
	word-wrap: normal !important;
}

/* Keep post dates and titles easy to activate on touch screens in list views. */
.blog .entry-header a[rel="bookmark"],
.archive .entry-header a[rel="bookmark"],
.search .entry-header a[rel="bookmark"] {
	align-items: center;
	box-sizing: border-box;
	display: inline-flex;
	min-height: 48px;
	min-width: 48px;
}

/* Hide publication dates in post lists while retaining the admin edit link. */
.blog .entry-header .entry-meta > a[rel="bookmark"],
.archive .entry-header .entry-meta > a[rel="bookmark"],
.search .entry-header .entry-meta > a[rel="bookmark"] {
	display: none;
}

/* Hide the default WordPress credit while keeping the footer available for widgets. */
.site-footer .site-info {
	display: none;
}

@media screen and (min-width: 48em) {
	/* Twenty Seventeen switches the home hero to 100vh at this breakpoint. */
	.has-header-image.twentyseventeen-front-page .custom-header,
	.has-header-video.twentyseventeen-front-page .custom-header,
	.has-header-image.home.blog .custom-header,
	.has-header-video.home.blog .custom-header {
		height: auto;
	}

	.twentyseventeen-front-page.has-header-image .custom-header-media,
	.twentyseventeen-front-page.has-header-video .custom-header-media,
	.home.blog.has-header-image .custom-header-media,
	.home.blog.has-header-video .custom-header-media,
	.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
	.admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media,
	.admin-bar.home.blog.has-header-image .custom-header-media,
	.admin-bar.home.blog.has-header-video .custom-header-media {
		height: 180px;
		height: clamp(170px, 18vh, 190px);
		max-height: none;
	}

	/* The parent theme reserves 70px for navigation even when it is absent.
	 * Remove that gap and vertically center the compact contact block. */
	.twentyseventeen-front-page.has-header-image .site-branding,
	.twentyseventeen-front-page.has-header-video .site-branding,
	.home.blog.has-header-image .site-branding,
	.home.blog.has-header-video .site-branding {
		bottom: auto;
		margin-bottom: 0;
		padding-bottom: 0;
		padding-top: 0;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.site-branding .site-title {
		font-size: 24px;
		font-size: 1.5rem;
	}

	.site-branding .site-description {
		font-size: 14px;
		font-size: 0.875rem;
	}

	body.home.blog .site-content {
		padding-top: 2.25em;
	}

	/* Use the space released by the old 36% page-title column. */
	body.home.blog:not(.has-sidebar) #primary {
		float: none;
		margin-left: auto;
		margin-right: auto;
		max-width: 900px;
		width: 100%;
	}

	body.home.blog:not(.has-sidebar) #primary article,
	body.home.blog:not(.has-sidebar) .navigation.pagination {
		float: none;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
	}

	/* Keep individual publications comfortably wide and centered too. */
	body.single-post:not(.has-sidebar) #primary {
		float: none;
		margin-left: auto;
		margin-right: auto;
		max-width: 900px;
		width: 100%;
	}
}