/* Logo styles for Art Gallery R&K s.r.o. */

/*
Contract
- Header logo: black variant, text + three squares (frame, filled, frame)
- Footer logo: white variant, text + three squares (frame, filled, frame)
- Pure CSS/HTML using existing markup in headerlogo.ascx and footerlogo.ascx
*/

/* Shared layout */
.header-logo a,
.footer-logo {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
}

	.header-logo .logo-text,
	.footer-logo .logo-text {
		line-height: 0.7;
		font-family: var(--font-playfair), Georgia, "Times New Roman", Times, serif;
		letter-spacing: -0.08em;
		font-weight: 600;
	}

.logo-line1 {
	display: block;
	font-size: 32px;
}

.logo-line2 {
	display: block;
	margin-top: 2px;
	font-size: 32px;
}

/* Ensure identical sizes in both contexts even if other footer/header CSS tries to override */
.header-logo .logo-line1,
.footer-logo .logo-line1 { font-size: 32px; }
.header-logo .logo-line2,
.footer-logo .logo-line2 { font-size: 32px; }

/* Fine-tune the ampersand a touch for visual balance */
.logo-text .amp {
	display: inline-block;
	transform: translateY(-0.02em);
	padding: 0 0.03em;
}

/* Squares motif */
.logo-squares {
	position: relative;
	width: 52px;   /* container width for the three squares */
	height: 36px;  /* container height for the three squares */
	display: inline-block;
}

.logo-squares .sq {
	position: absolute;
	box-sizing: border-box;
}

/* 1) frame only (largest, back-left) */
	.logo-squares .sq1 {
		width: 28px;
		height: 28px;
		top: -3px; /* largest sits highest */
		left: 21px; /* shifted to the right */
		border: 3px solid #1e1e1e;
		background: none !important; /* outlined only */
		z-index: 1; /* back */
	}

/* 2) filled (middle size, centered) */
	.logo-squares .sq2 {
		width: 24px;
		height: 24px;
		top: 8px;
		left: 12px;
		background: #1e1e1e;
		z-index: 2; /* middle */
	}

/* 3) frame only (smallest, front-right) */
	.logo-squares .sq3 {
		width: 20px;
		height: 20px;
		top: 22px;
		left: 1px;
		border: 3px solid #1e1e1e;
		background: none !important; /* outlined only */
		z-index: 3; /* front */
	}

/* Variant control: hide unused text versions by context */
.header-logo .logo-text { display: none; }
.header-logo .logo-text.dark { display: inline-block; }

.footer-logo .logo-text { display: none; }
.footer-logo .logo-text.light { display: inline-block; }

/* Colors inherit to both text and squares via currentColor */
.header-logo a { color: #1e1e1e; }
.footer-logo { color: #fff; }

/* Minor hover feedback without changing layout */
.header-logo a:hover,
.footer-logo:hover { opacity: 0.92; }

/* Small screens tightening */
@media (max-width: 399px) {
	.header-logo a,
	.footer-logo { gap: 10px; }
	.logo-line1 { font-size: 28px; }
	.logo-line2 { font-size: 28px; }
	.logo-squares { width: 46px; height: 32px; }
	.logo-squares .sq1 { width: 24px; height: 24px; top: 0; left: 18px; border-width: 1.5px; }
	.logo-squares .sq2 { width: 20px; height: 20px; top: 7px; left: 11px; }
	.logo-squares .sq3 { width: 16px; height: 16px; top: 23px; left: 2px; border-width: 1.5px; }
}