/* Работно време – responsive layout.
   Generated from _build/templates/style.css – edit there, then run build.py.

   Every colour is a token. Nothing hard-coded in rules; that was how four
   AA contrast failures hid in the breadcrumb and footer. Dark mode overrides
   the same tokens, so a new component inherits both schemes for free. */

:root {
	color-scheme: light dark;

	/* brand (inherited identity, do not drift) */
	--red: #ce0000;
	--red-dark: #90200a;
	--red-link: #df0005;

	/* surfaces */
	--page: #f4f4f4;
	--surface: #ffffff;
	--panel: #f9f9f9;
	--line: #e2e2e2;
	--line-soft: #f0f0f0;

	/* text */
	--ink: #003031;
	--ink-soft: #2f4f4f;
	--ink-body: #333333;
	--muted: #607080;        /* 5.09:1 on white */
	--muted-strong: #556069; /* 6.44:1 on white, 5.85:1 on --page */

	/* links */
	--link: #003366;
	--link-hover: #a52a2a;
	--tagline: #00008b;

	/* focus + controls */
	--focus: #0b57d0;
	--on-brand: #ffffff;
	--logo-backing: #ffffff;  /* brand marks are drawn for white */
	--btn-border: #cecece;

	--maxw: 1100px;
	--tap: 44px;             /* minimum comfortable touch target */

	/* spacing scale – 23 ad-hoc values collapsed to 7 steps.
	   Rhythm comes from choosing a step, not from inventing a number. */
	--s1: 4px;
	--s2: 8px;
	--s3: 12px;
	--s4: 16px;
	--s5: 24px;
	--s6: 36px;
	--s7: 56px;

	--radius: 4px;
	--radius-sm: 3px;

	/* one curve, one duration: state changes acknowledge, never perform */
	--ease: cubic-bezier(.22, 1, .36, 1);   /* ease-out-quart */
	--fast: 120ms;
	--base: 180ms;
}

@media (prefers-color-scheme: dark) {
	:root {
		--red: #ff7a6b;
		--red-dark: #ff9c90;
		--red-link: #ff8a7a;

		--page: #11171a;
		--surface: #171d20;
		--panel: #1e2528;
		--line: #2c3538;
		--line-soft: #232b2e;

		--ink: #e6edee;
		--ink-soft: #c3cfd1;
		--ink-body: #d4dcde;
		--muted: #9aa7ad;
		--muted-strong: #a3b0b6;

		--link: #8ab4f8;
		--link-hover: #ff9c90;
		--tagline: #9db2d6;

		--focus: #a8c7fa;
		--on-brand: #2a0c08;
		--btn-border: #3a4548;
	}
}

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--page);
	color: var(--ink);
	font-family: Verdana, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.55;
}

img { max-width: 100%; height: auto; }

/* long Bulgarian compounds must never push the page sideways */
body, th, td, li, p, h1, h2, h3, dt, dd { overflow-wrap: break-word; }

/* ---------- skip link ---------- */
.skip {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--surface); color: var(--ink);
	padding: .7em 1em; border: 2px solid var(--focus); border-radius: 0 0 4px 0;
	font-weight: bold;
}
.skip:focus { left: 0; }

/* ---------- focus ---------- */
:where(a, button, [tabindex]):focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

.adwrap { text-align: center; margin: 0 auto; padding: var(--s2) 0; overflow: hidden; }

/* AdSense reserves the slot height before it knows whether it has an ad, and
   on an unfilled slot it keeps it: 360px of nothing above the h1 on a phone,
   so the first screen was blank. Collapse the slot and its padding when
   Google reports no ad. This is Google's own documented attribute. */
.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.adwrap:not(:has(ins[data-ad-status="filled"])) { padding: 0; }
.adwrap:empty { display: none; }

#main {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--s4);
	background: var(--surface);
}

/* ---------- header ---------- */
#header { padding: var(--s4) 0 var(--s2); border-bottom: 1px solid var(--line); }

.brand { display: flex; align-items: center; gap: var(--s3); text-decoration: none; }
.brand img { width: 37px; height: 42px; flex: none; }
.title {
	font-size: clamp(26px, 5.2vw, 44px);
	font-style: italic;
	font-weight: bold;
	color: var(--red);
	line-height: 1.1;
}
.brand:hover .title { color: var(--red-dark); }
.tagline { font-family: Georgia, "Times New Roman", serif; color: var(--tagline); font-size: 14px; margin: var(--s1) 0 0; }

#topmenu { display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s3) 0; }
#topmenu a {
	display: inline-flex; align-items: center; min-height: var(--tap);
	color: var(--on-brand); background: var(--red); border: 1px solid var(--btn-border);
	padding: 0 .9em; text-decoration: none; font-weight: bold; font-size: 15px;
	border-radius: var(--radius-sm);
}
#topmenu a:hover, #topmenu a[aria-current="page"] { background: var(--red-dark); border-color: var(--red-dark); }
#topmenu a { transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease); }
#topmenu a:active { background: var(--red-dark); transform: translateY(1px); }

/* ---------- layout ---------- */
#layout { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: flex-start; padding: var(--s2) 0 var(--s5); }
#content { flex: 1 1 520px; min-width: 0; }
#lefty   { flex: 0 0 250px; min-width: 0; }

@media (max-width: 860px) {
	#layout { flex-direction: column; gap: var(--s5); }
	#lefty { flex: 1 1 auto; width: 100%; }
}

/* ---------- content ---------- */
h1 { font-size: clamp(23px, 4vw, 30px); color: var(--ink); line-height: 1.22; margin: .4em 0 .5em; text-wrap: balance; letter-spacing: -.01em; }
h2 { font-size: clamp(19px, 3vw, 23px); color: var(--ink); margin: var(--s6) 0 var(--s3); text-wrap: balance; }
h3 { font-size: 18px; font-weight: bold; color: var(--ink); margin: var(--s5) 0 var(--s2); }

#content p { margin: 0 0 1em; max-width: 72ch; text-wrap: pretty; }
#content ul { margin: 0 0 1em; padding-left: 1.2em; max-width: 72ch; }
#content ul li { list-style: disc; line-height: 1.6; margin-bottom: .3em; }

a { color: var(--link); text-decoration: none; transition: color var(--fast) var(--ease); }
a:hover { color: var(--link-hover); text-decoration: underline; }
#content a { color: var(--red-link); }
#content a:hover { color: var(--red); }

.lead { font-size: 1.05em; }
.logo-lead { margin: 0 0 1em; }

/* ---------- hours tables ---------- */
.hours { width: 100%; border-collapse: collapse; margin: 0 0 1em; }
.hours caption { text-align: left; font-weight: bold; padding: 0 0 .5em; color: var(--ink-soft); }
.hours th, .hours td { padding: .55em .6em; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.hours th { width: 45%; font-weight: normal; color: var(--muted); }
.hours td { font-weight: bold; }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
.hours .closed { font-weight: normal; color: var(--muted); }

.hours.compare th, .hours.compare td { width: auto; }
.hours.compare th[scope="row"], .hours.compare td { font-weight: normal; }
.hours.compare th[scope="col"] { font-weight: bold; color: var(--ink-soft); }

/* 4 columns of Bulgarian place names do not fit a phone. Stack into
   label/value rows instead of scrolling sideways. */
@media (max-width: 620px) {
	.hours.compare, .hours.compare tbody, .hours.compare tr,
	.hours.compare th, .hours.compare td { display: block; width: auto; }
	/* a table-caption inside a display:block table shrink-wraps to 120px */
	.hours.compare caption { display: block; width: auto; }
	.hours.compare tr:first-child { display: none; }          /* column headers */
	.hours.compare tr {
		border: 1px solid var(--line); border-radius: var(--radius);
		padding: .5em .7em; margin: 0 0 .6em;
	}
	.hours.compare th[scope="row"] {
		font-weight: bold; color: var(--ink); padding: 0 0 .35em; border: 0;
	}
	.hours.compare td { padding: .15em 0; border: 0; display: flex; gap: .6em; }
	.hours.compare td::before {
		content: attr(data-label) ":";
		flex: 0 0 5.5em; color: var(--muted); font-weight: normal;
	}
}

/* ---------- branch list ---------- */
/* was a red left stripe; a hairline divider matches the hours tables
   and reads as a list rather than an alert */
.branches { margin: 0 0 1em; border-top: 1px solid var(--line); }
.branch { padding: .7em 0; border-bottom: 1px solid var(--line); margin: 0; }
.branch b { display: block; color: var(--ink); }
.branch span { display: block; color: var(--muted); font-size: .92em; }

.note { background: var(--panel); border: 1px solid var(--line); padding: .8em 1em; margin: 0 0 1em; font-size: .95em; }
.contacts { background: var(--panel); border: 1px solid var(--line); padding: .8em 1em; margin: 0 0 1em; }
.contacts p { margin: 0 0 .35em; }
.contacts p:last-child { margin: 0; }

.faq dt { font-weight: bold; color: var(--ink); margin: 1em 0 .25em; }
.faq dd { margin: 0; color: var(--ink-body); max-width: 72ch; }

.related ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.related ul li { list-style: none; margin: 0; }
.related a {
	display: inline-flex; align-items: center; min-height: var(--tap);
	background: var(--panel); border: 1px solid var(--line);
	padding: 0 .8em; border-radius: var(--radius-sm); font-size: .92em;
	transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.related a:hover { border-color: var(--red); background: var(--surface); text-decoration: none; }
.related a:active { transform: translateY(1px); }

.updated { color: var(--muted); font-size: .88em; margin: 1.5em 0 0; }
.aliases { color: var(--muted); font-size: .93em; }

/* ---------- logo grid ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s3); margin: 0 0 var(--s6); }
.grid a {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2);
	min-height: 118px; padding: var(--s3); text-align: center;
	border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: .9em;
}
.grid a {
	transition: border-color var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.grid a:hover { border-color: var(--red); text-decoration: none; box-shadow: 0 1px 3px rgb(0 0 0 / .08); }
.grid a:active { border-color: var(--red); box-shadow: none; transform: translateY(1px); }
.grid img { max-height: 58px; width: auto; object-fit: contain; }
.grid a .tile-text { font-weight: bold; color: var(--ink); font-size: 1em; }

/* logos are flat brand marks on white; lift them off a dark page */
@media (prefers-color-scheme: dark) {
	.grid img, .logo-lead img { background: var(--logo-backing); padding: 4px; border-radius: var(--radius-sm); }
}

/* ---------- sidebar ---------- */
#menu { font-size: 15px; }
#menu h2 {
	font-size: 15px; color: var(--red); font-style: italic; font-weight: bold;
	margin: 1.1em 0 .3em; padding: 0;
}
#menu h2:first-child { margin-top: 0; }
#menu h2 a { color: inherit; }
#menu ul { list-style: none; margin: 0; padding: 0; }
#menu li { list-style: none; margin: 0; }
#menu a {
	display: flex; align-items: center; min-height: var(--tap);
	color: var(--ink); padding: .3em; border-bottom: 1px solid var(--line-soft);
}
#menu a { transition: color var(--fast) var(--ease), background var(--fast) var(--ease); }
#menu a:hover { color: var(--red); text-decoration: none; background: var(--panel); }
#menu a:active { background: var(--line-soft); }
#menu a[aria-current="page"] { color: var(--red); font-weight: bold; }

@media (max-width: 860px) {
	#lefty { border-top: 2px solid var(--line); padding-top: var(--s4); margin-top: var(--s2); }
	#menu ul { display: flex; flex-wrap: wrap; gap: var(--s1); }
	#menu li { flex: 0 0 auto; }
	#menu a { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 .7em; }
}

/* ---------- breadcrumb + footer ---------- */
#breadcrumb { font-size: .85em; color: var(--muted-strong); padding: var(--s3) 0 0; }
#breadcrumb a { color: var(--muted-strong); text-decoration: underline; }
#breadcrumb a:hover { color: var(--red); }

#footer {
	max-width: var(--maxw); margin: 0 auto; padding: var(--s5) var(--s4);
	text-align: center; color: var(--muted-strong); font-size: 13px;
}
#footer a { color: var(--muted-strong); text-decoration: underline; }
#footer a:hover { color: var(--red); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	#topmenu a:active, .grid a:active, .related a:active {
		transform: none !important;
	}
}