/*
Theme Name: Kompiuterių supirkimas
Theme URI: https://kompiuteriu-supirkimas.lt/
Author: Kompiuterių supirkimas
Description: Paprasta klasikinė WordPress tema naudotų kompiuterių ir IT įrangos supirkimo svetainei.
Version: 1.2.1
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
Text Domain: kompiuteriu-supirkimas
*/

:root {
	--ks-ink: #062b26;
	--ks-ink-2: #153a35;
	--ks-green: #06483f;
	--ks-green-light: #dce8e2;
	--ks-paper: #ffffff;
	--ks-warm: #f3f0e9;
	--ks-line: #d6dcd8;
	--ks-muted: #5c6865;
	--ks-orange: #d97b43;
	--ks-container: 1260px;
	--ks-header: 76px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--ks-header) + 24px);
}

body {
	margin: 0;
	background: var(--ks-paper);
	color: var(--ks-ink);
	font-family: Inter, Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

body.admin-bar .site-header { top: 32px; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

:focus-visible {
	outline: 3px solid rgba(217, 123, 67, .55);
	outline-offset: 3px;
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
}

.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	height: auto;
	left: 16px;
	top: 16px;
	width: auto;
	padding: 10px 16px;
	background: #fff;
	z-index: 10000;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	height: var(--ks-header);
	background: rgba(255, 255, 255, .96);
	border-bottom: 1px solid rgba(6, 43, 38, .12);
	transition: box-shadow .2s ease;
}

.site-header.is-scrolled { box-shadow: 0 10px 28px rgba(6, 43, 38, .08); }

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 30px;
	width: min(calc(100% - 48px), var(--ks-container));
	height: 100%;
	margin: 0 auto;
}

.site-branding { flex: 0 0 auto; }
.custom-logo-link, .custom-logo-link img { display: block; width: auto; max-height: 48px; }

.wordmark {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	font-weight: 850;
	letter-spacing: .04em;
	line-height: 1.05;
	text-transform: uppercase;
}

.wordmark__mark {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	background: var(--ks-ink);
	color: #fff;
	font-size: 16px;
	letter-spacing: 0;
}

.wordmark__text { display: grid; gap: 2px; }
.wordmark__text span:last-child { color: var(--ks-muted); font-size: 9px; letter-spacing: .15em; }

.primary-navigation { margin-left: auto; }
.primary-menu, .footer-menu {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.4vw, 36px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-menu a {
	display: block;
	padding: 12px 0;
	font-size: 14px;
	font-weight: 700;
}

.primary-menu a:hover { color: var(--ks-orange); }

.primary-menu > li { position: relative; }
.primary-menu .menu-item-has-children > a { display: flex; align-items: center; gap: 7px; }
.primary-menu .menu-item-has-children > a::after {
	position: relative;
	top: -1px;
	font-size: 11px;
	font-weight: 500;
	content: "⌄";
}

.primary-menu .sub-menu {
	position: absolute;
	top: calc(100% - 1px);
	left: -18px;
	z-index: 1100;
	min-width: 230px;
	margin: 0;
	padding: 8px 0;
	visibility: hidden;
	background: #fff;
	border: 1px solid var(--ks-line);
	box-shadow: 0 18px 36px rgba(6, 43, 38, .12);
	list-style: none;
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.primary-menu .sub-menu .sub-menu { top: -9px; left: calc(100% - 1px); }
.primary-menu .sub-menu li { position: relative; }
.primary-menu .sub-menu a {
	padding: 10px 18px;
	border-bottom: 1px solid #edf0ee;
	font-size: 13px;
	line-height: 1.35;
	white-space: normal;
}
.primary-menu .sub-menu li:last-child > a { border-bottom: 0; }
.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}
.primary-menu > li:nth-last-child(-n+2) > .sub-menu { right: -18px; left: auto; }
.primary-menu > li:nth-last-child(-n+2) > .sub-menu .sub-menu { right: calc(100% - 1px); left: auto; }

.header-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0 20px;
	border: 1px solid var(--ks-ink);
	font-size: 14px;
	font-weight: 800;
	transition: background .18s ease, color .18s ease;
}

.header-cta:hover { background: var(--ks-ink); color: #fff; }

.menu-toggle {
	display: none;
	width: 42px;
	height: 42px;
	margin-left: auto;
	padding: 10px;
	border: 0;
	background: transparent;
}

.menu-toggle > span:not(.screen-reader-text) {
	display: block;
	width: 22px;
	height: 2px;
	margin: 5px 0;
	background: var(--ks-ink);
}

.front-page-content { overflow: hidden; }

.site-main--standard {
	width: min(calc(100% - 48px), 920px);
	min-height: 60vh;
	margin: 0 auto;
	padding: 80px 0;
}

.entry-header h1 { margin: 0 0 30px; font-size: clamp(42px, 6vw, 72px); line-height: 1; }
.entry-content { color: #263d39; }
.entry-content > * { max-width: 760px; }

.site-footer { background: #041f1c; color: #fff; }
.site-footer__top {
	display: grid;
	grid-template-columns: 1.1fr .8fr 1fr;
	gap: 60px;
	width: min(calc(100% - 48px), var(--ks-container));
	margin: 0 auto;
	padding: 72px 0 58px;
}

.site-footer__brand strong { display: block; margin-bottom: 16px; font-size: 22px; }
.site-footer__brand p { max-width: 390px; margin: 0; color: #b6c5c1; }
.site-footer h2 { margin: 0 0 18px; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; }
.site-footer .widget { margin: 0; }
.site-footer .widget-title { color: #fff; }
.site-footer .widget p:first-child { margin-top: 0; }
.site-footer .widget p:last-child { margin-bottom: 0; }
.site-footer .widget ul { margin: 0; padding: 0; list-style: none; }
.site-footer .widget li + li { margin-top: 8px; }
.site-footer .custom-logo-link { margin-bottom: 18px; }
.site-footer .custom-logo-link img { max-height: 54px; filter: brightness(0) invert(1); }
.footer-menu { display: grid; gap: 8px; }
.footer-menu .sub-menu {
	display: grid;
	gap: 6px;
	margin: 8px 0 4px 4px;
	padding: 0 0 0 14px;
	border-left: 1px solid rgba(255,255,255,.24);
	list-style: none;
}
.footer-menu .sub-menu a { color: #aebfbb; font-size: 13px; }
.footer-menu a, .site-footer__contact a { color: #dce6e3; }
.footer-menu a:hover, .site-footer__contact a:hover { color: #fff; text-decoration: underline; }
.site-footer__contact { display: grid; align-content: start; gap: 8px; }
.site-footer__bottom {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	width: min(calc(100% - 48px), var(--ks-container));
	margin: 0 auto;
	padding: 20px 0 28px;
	border-top: 1px solid rgba(255, 255, 255, .16);
	color: #99aaa6;
	font-size: 12px;
}

@media (max-width: 960px) {
	body.admin-bar .site-header { top: 32px; }
	.site-header__inner { width: min(calc(100% - 32px), var(--ks-container)); }
	.menu-toggle { display: block; }
	.header-cta { display: none; }
	.primary-navigation {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		display: none;
		padding: 14px 24px 24px;
		background: #fff;
		border-bottom: 1px solid var(--ks-line);
	}
	.nav-open .primary-navigation { display: block; }
	.primary-menu { display: grid; gap: 0; }
	.primary-menu a { padding: 12px 0; border-bottom: 1px solid var(--ks-line); }
	.primary-menu .sub-menu,
	.primary-menu .sub-menu .sub-menu {
		position: static;
		display: grid;
		min-width: 0;
		margin: 0;
		padding: 0 0 8px 18px;
		visibility: visible;
		background: transparent;
		border: 0;
		box-shadow: none;
		opacity: 1;
		pointer-events: auto;
		transform: none;
	}
	.primary-menu .sub-menu a { padding: 10px 0; color: var(--ks-muted); font-size: 13px; }
	.primary-menu .sub-menu .sub-menu { padding-left: 16px; }
	.site-footer__top { grid-template-columns: 1fr 1fr; }
	.site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

@media (max-width: 640px) {
	:root { --ks-header: 68px; }
	.site-header__inner, .site-footer__top, .site-footer__bottom { width: min(calc(100% - 32px), var(--ks-container)); }
	.wordmark__text { font-size: 12px; }
	.site-footer__top { grid-template-columns: 1fr; gap: 38px; padding: 54px 0 42px; }
	.site-footer__brand { grid-column: auto; }
	.site-footer__bottom { display: grid; }
}