/*
Theme Name: Montessori Classic
Description: 1:1 copy of the original montessori-bulgaria.com design (illustrated scenes and animations), running on Montessori Core.
Version: 0.1.0
Author: Illumi Bulgaria
Requires PHP: 8.1
Text Domain: montessori-classic
*/

/* The design itself lives in assets/css/main-dist.css (original, unchanged). Only additions for new features go below. */

/* Visit request: date and time fields drawn like the original text inputs. */
.white-form input[type=date],
.white-form select {
	font-size: 28px;
	line-height: 34px;
	font-family: 'Cabin Sketch', Arial, sans-serif;
	border: 0;
	outline: none;
	height: 34px;
	background: #fff url('assets/images/input-dot.svg') repeat-x bottom center;
	width: 100%;
	color: #696969;
	padding: 0 0 0 190px;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}
.bg .white-form input[type=date],
.bg .white-form select {
	font-family: 'Neucha', Arial, sans-serif;
}
/* The date and time labels stay on the line (the field always shows a value or placeholder), so the value starts after
   them. Only these two: the child's age is a plain text field and its label must go up like the others. */
.white-form label.move-label[for="preferred_date"],
.white-form label.move-label[for="preferred_time"] {
	transform: none;
}
/* A fieldset is never narrower than its widest field unless told so: on a phone the date field pushed the whole form
   out of the screen. */
.white-form fieldset {
	min-width: 0;
}
@media only screen and (max-width: 768px) {
	.white-form input[type=date],
	.white-form select {
		min-width: 0;
		padding-left: 150px;
		font-size: 22px;
	}
}
/* The child's age (parts/inquiry-form.php, 2026-11-12, "в години и месеци"): two choices, years and months, side by side
   on the field's dotted line; the label stays above them, as on a filled field. */
.white-form .mch-age .mch-age__parts { display: flex; gap: 20px; }
.white-form .mch-age select {
	flex: 1 1 0;
	min-width: 0;
	padding: 0 26px 0 2px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23696969' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 6px center / 14px 9px, #fff url('assets/images/input-dot.svg') repeat-x bottom center;
	cursor: pointer;
}
.white-form .mch-age select:has(option[value=""]:checked) { color: #b4b4b4; }
.white-form .mch-age select option { color: #696969; }

/* The login panel in the header: e-mail + password, "Вход" and "Регистрация" side by side, "Забравена парола?" below. */
.topbar .login-pannel .login-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding-top: 25px; }
.topbar .login-pannel .login-actions .btn { margin: 0; padding-left: 28px; padding-right: 54px; }
.topbar .login-pannel .login-actions .btn.btn-yellow { color: #000; }
.topbar .login-pannel .login-lost { display: inline-block; margin-top: 14px; font: 400 15px/1.3 'Open Sans', sans-serif; color: #52aae8; text-decoration: underline; text-underline-offset: 3px; }
.topbar .login-pannel .login-lost:hover { color: #ff5736; }
.topbar .login-pannel #user-error { display: block; margin-top: 10px; font: 400 14px/1.4 'Open Sans', sans-serif; color: #ff5736; }
.topbar .login-pannel #user-error:empty { display: none; }

/* The cookie bar: "accept all", "only the necessary ones" and "refuse" (parts/cookies.php, the client's notes of
   2026-11-05). The first keeps the red button of the site, the other two are quieter but just as easy to press. */
.cookies-btn { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 12px; }
.cookies-choice { min-height: 42px; margin: 0; padding: 8px 20px; border: 2px solid rgba(255, 255, 255, .7); border-radius: 22px; background: transparent; color: #fff; font: 400 19px/1.2 'Neucha', 'Open Sans', sans-serif; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.cookies-choice:hover, .cookies-choice:focus-visible { border-color: #fff; background: rgba(255, 255, 255, .14); outline: none; }
.cookies-choice--plain { border-color: transparent; padding-left: 10px; padding-right: 10px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .5); }
.cookies-choice--plain:hover, .cookies-choice--plain:focus-visible { border-color: transparent; background: none; color: #ffda0f; }
@media only screen and (max-width: 1100px) {
	.cookies-btn { justify-content: center; }
}

/* ========== Phones and tablets: the parts of every page (2026-11-05, "the mobile version") ========== */
/* the overlay behind the open menu; a tap on it closes the menu (assets/js/site.js) */
.menu-scrim { position: fixed; inset: 0; z-index: 1000; background: rgba(20, 45, 75, .42); opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s linear .25s; -webkit-tap-highlight-color: transparent; }
@media only screen and (max-width: 1320px) {
	body.menu-open .menu-scrim, body.login-open .menu-scrim { opacity: 1; visibility: visible; transition-delay: 0s; }
	body.menu-open .topbar, body.login-open .topbar { z-index: 1001; }
	/* the open menu: room to tap, the parent of an open group marked, the long groups scroll inside */
	.topbar nav ul li a { padding-top: 7px; padding-bottom: 7px; }
	.topbar nav ul li.sub-menu-open { background: #f4f9fd; }
	.topbar nav ul li.sub-menu-open > a { color: #2f80c8; }
}
/* A bigger logo (2026-11-12, Влайо: „да увеличим логото, защото сега не се чете детска къща / childrens house“; it was
   200px everywhere). Where the menu stands beside it (1366-1599) the menu moves right and its items come a little
   closer together to make room; 1321-1365 stays as it was (no room). */
.topbar .logo img { display: block; width: 100%; height: auto; }
/* and once more a little bigger (Влайо: „още малко по голямо логото“): the home page's words move down under it */
@media only screen and (min-width: 1600px) {
	.topbar .logo { top: 10px; left: 14px; width: 300px; height: auto; }
	.topbar nav { margin-left: 250px; margin-right: 150px; }
	body .hero-note { left: max(340px, calc(50% - 620px)); } /* body: hero.css comes after this file */
}
@media only screen and (min-width: 1366px) and (max-width: 1599px) {
	.topbar .logo { top: 10px; left: 10px; width: 260px; height: auto; }
	.topbar nav { margin-left: 250px; margin-right: 150px; }
	body .hero-note { top: 182px; }
	/* a long page title (e.g. "Documents and steps for enrollment") clear of the cloud's lower edge */
	.main-header .page-title { position: relative; top: 10px; }
}
@media only screen and (min-width: 1366px) and (max-width: 1439px) {
	.topbar nav ul li a { padding-left: 6px; padding-right: 6px; font-size: 21px; }
}
@media only screen and (min-width: 1440px) and (max-width: 1599px) {
	.topbar nav ul li a { padding-left: 8px; padding-right: 8px; }
}
@media only screen and (min-width: 568px) and (max-width: 1320px) {
	.topbar .logo { top: 2px; left: 14px; width: 240px; height: auto; } /* clear of a long page title under it */
}
@media only screen and (min-width: 568px) and (max-width: 1110px) {
	body .hero-note { padding-top: 16px; }
}
@media only screen and (max-width: 567px) {
	.topbar .logo { width: 280px; height: auto; margin-top: 12px; margin-bottom: 12px; }
}

/* the breadcrumbs a little bigger (2026-11-12, Влайо: „шрифта да го увеличим малко на бреадкръмбсите“; was 13px) */
.breadcrumbs a { font-size: 16px; line-height: 28px; }
@media only screen and (max-width: 567px) {
	.breadcrumbs a { font-size: 15px; }
}
@media only screen and (max-width: 567px) {
	/* the menu is as wide as the screen allows (it was 280px, with the page showing beside it) */
	.topbar nav { left: 12px; right: 12px; width: auto; top: 200px; }
	.topbar nav ul { max-height: calc(100vh - 230px); max-height: calc(100dvh - 230px); overflow-y: auto; overscroll-behavior: contain; padding: 8px 0; border-radius: 16px; box-shadow: 0 18px 40px -14px rgba(0, 30, 60, .45); }
	.topbar nav ul li > ul { max-height: none; overflow: visible; box-shadow: none; border-radius: 0; }
	.topbar nav ul li a { font-size: 21px; line-height: 28px; padding: 8px 22px; }
	.topbar nav ul li > ul li a { font-size: 18px; line-height: 24px; padding: 8px 22px 8px 40px; }
	.topbar .login-pannel { left: 12px; right: 12px; width: auto; top: 200px; }
	/* the breadcrumbs on one line: a long title ends in "…" instead of a word alone on the next line */
	.breadcrumbs { display: flex; align-items: center; white-space: nowrap; overflow: hidden; }
	.breadcrumbs a { flex: none; }
	.breadcrumbs a:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
	/* "Up": smaller, so it covers less of the page above the footer */
	.up { top: -70px; right: 12px; width: 44px; height: 70px; padding-top: 24px; font-size: 14px; border-top-left-radius: 22px; border-top-right-radius: 22px; }
}
@media only screen and (max-width: 639px) {
	/* the cookie bar: a compact strip instead of half of the screen; the three choices side by side, "refuse" below */
	.cookies .content { padding: 14px 0 12px; }
	.cookies .content > * { padding-bottom: 10px; }
	.cookies .cookies-content p { font-size: 13px; line-height: 1.5; }
	.cookies-btn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
	.cookies-btn .btn, .cookies-choice { width: 100%; min-height: 40px; margin: 0; font-size: 16px; line-height: 20px; text-align: center; }
	.cookies-btn .btn { padding: 10px 28px 10px 10px; }
	.cookies-choice { padding: 8px 8px; }
	.cookies-choice--plain { grid-column: 1 / -1; min-height: 32px; padding: 2px 8px; }
	/* the earth of the home page's footer: a strip of soil between the calendar and the bottom, where the worms and the
	   mole live (a worm lay on the Facebook icon and the mole crossed the text) */
	.soil > .wrapper { padding-bottom: 96px; }
	.soil .worm-3.flip { right: 18px; bottom: 214px; }
	.soil .worm-2:not(.flip) { left: 24px; bottom: 214px; top: auto; }
	.soil .mole { bottom: 196px; }
}
@media only screen and (max-width: 567px) {
	/* the forms "Заявете посещение" and "Контакти" (parts/inquiry-form.php): the handwritten labels on dotted lines stay,
	   but smaller and closer together, a shorter message box and the button across the width (it stood alone on the
	   right under an empty half) */
	.white-form { padding: 22px 18px 26px; }
	.white-form .field { padding: 30px 0 4px; }
	.white-form label { top: 30px; left: 0; height: 30px; font-size: 23px; line-height: 30px; }
	.white-form .move-label { transform: translate3d(0, -24px, 0); }
	.white-form input[type=text], .white-form input[type=email], .white-form input[type=tel], .white-form .mch-age select { height: 30px; font-size: 20px; line-height: 30px; }
	.white-form .mch-age .mch-age__parts { gap: 14px; }
	.white-form .mch-age { padding-top: 42px; } /* its label stays up: some air under the phone's line */
	.white-form .mch-age label { top: 42px; }
	.white-form textarea { height: 128px; font-size: 20px; line-height: 32px; }
	.white-form .field.va-middle:not(.align-right) { display: none; }
	.white-form .field.align-right { width: 100%; padding-top: 22px; text-align: center; }
	.white-form .field.align-right .btn { width: 100%; margin: 0; }
	.white-form .error-msg { font-size: 16px; }
}

/* the sign of "© 2026 … Всички права запазени." (footer.php, 2026-11-12) in a plain font */
.footer-bottom .copyright__sign { font: 400 1.1em/1 Arial, sans-serif; }