/* ==========================================================
   pidruchnyk.com.ua — нова шапка (v1)
   ========================================================== */
body { background: #f2efe8 !important; }
.panelx1 { background: none !important; }
#wrapper { padding-top: 14px; }

.nh {
	background: #fff; border-radius: 16px 16px 0 0; padding: 16px 20px 0;
	box-shadow: 0 1px 0 #ece7dc; position: relative; z-index: 5;
}
.nh-top { display: flex; align-items: center; gap: 18px; }

.nh-logo { display: flex; align-items: center; gap: 10px; text-decoration: none !important; flex: 0 0 auto; }
.nh-logo-ico {
	width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
	background: #2f5d50; color: #fff;
}
.nh-logo-txt b { display: block; font: 800 20px/1.1 Arial, sans-serif; color: #222; letter-spacing: -.2px; }
.nh-logo-txt b::first-letter { color: #f46604; }
.nh-logo-txt small { display: block; font: 400 12px/1.5 Arial, sans-serif; color: #8a8a8a; margin-top: 2px; }

.nh-search { flex: 1; display: flex; align-items: center; height: 46px; background: #f4f4f2; border: 1px solid #e4e1da; border-radius: 23px; padding: 0 6px 0 18px; transition: border-color .15s, box-shadow .15s; }
.nh-search:focus-within { border-color: #2f5d50; box-shadow: 0 0 0 3px rgba(47,93,80,.12); background: #fff; }
.nh-search input[type="text"] { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; font: 15px/1 Arial, sans-serif; color: #222; height: 44px; }
.nh-search input::placeholder { color: #9a9a9a; }
.nh-search button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #2f5d50; color: #fff; display: grid; place-items: center; cursor: pointer; }
.nh-search button:hover { background: #244a40; }

.nh-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.nh-act { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 12px; text-decoration: none !important; color: #333 !important; font: 700 13px/1 Arial, sans-serif; background: #f4f4f2; border: 1px solid #e4e1da; }
.nh-act:hover { border-color: #f46604; color: #f46604 !important; }
.nh-act .i { font-size: 15px; line-height: 1; }
.nh-act b { min-width: 18px; padding: 2px 6px; border-radius: 10px; background: #f46604; color: #fff; font-size: 11px; text-align: center; }

.nh .nh-classes { position: static; width: auto; min-height: 0; background: none; box-shadow: none; border-radius: 0; }
.nh-classes { display: flex; gap: 4px; margin: 14px -20px 0; padding: 0 20px; border-top: 1px solid #efece5; overflow-x: auto; scrollbar-width: none; }
.nh-classes::-webkit-scrollbar { display: none; }
.nh-classes a { flex: 0 0 auto; padding: 13px 12px 12px; font: 700 14px/1 Arial, sans-serif; color: #444 !important; text-decoration: none !important; border-bottom: 3px solid transparent; white-space: nowrap; }
.nh-classes a:hover { color: #f46604 !important; border-bottom-color: #f46604; }
.nh-classes a.on { color: #2f5d50 !important; border-bottom-color: #2f5d50; }

.nh-intro { background: #fff; padding: 0 20px; color: #666; font-size: 13px; line-height: 1.55; }
.nh-intro:not(:empty) { padding-top: 12px; padding-bottom: 4px; }

/* блок «Нові підручники» */
.nh-board { background: #fff; padding: 12px 20px 16px; }
.nh-board-in {
	display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto auto 1fr; column-gap: 16px;
	background: linear-gradient(135deg, #2f5d50, #3b7363); color: #fff; border-radius: 14px; padding: 16px 18px; overflow: hidden;
}
.nh-board-in .board-label { grid-column: 2; margin: 0 0 6px; color: #ffd27a; font: 700 11px/1 Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.nh-board-in .category-image { grid-column: 1; grid-row: 1 / span 3; float: none; margin: 0; }
.nh-board-in .category-image img { width: 96px; height: auto; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.25); display: block; }
.nh-board-in .category-links { grid-column: 2; width: auto !important; float: none !important; position: static !important; }
.nh-board-in .category-links ul { margin: 0; padding: 0; list-style: none; }
.nh-board-in .main-headline { display: block; color: #fff !important; font: 700 18px/1.3 Arial, sans-serif; text-decoration: none; margin-bottom: 8px; }
.nh-board-in ul + ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; align-content: start; }
.nh-board-in li { margin: 0; }
.nh-board-in .headline-small { color: #e6f0ec !important; font-size: 13px; line-height: 1.35; text-decoration: none; }
.nh-board-in a:hover { color: #ffd27a !important; }

#content { border-radius: 0 0 16px 16px; }

/* ---------- Планшети й телефони ---------- */
@media (max-width: 1040px) {
	#wrapper { padding-top: 8px; }
	.nh { padding: 12px 12px 0; border-radius: 14px 14px 0 0; }
	.nh-top { flex-wrap: wrap; gap: 10px; }
	.nh-logo { flex: 1 1 0; min-width: 0; }
	.nh-logo-txt { min-width: 0; }
	.nh-logo-txt b, .nh-logo-txt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.nh-actions { gap: 6px; }
	.nh-logo-ico { width: 38px; height: 38px; border-radius: 10px; }
	.nh-logo-txt b { font-size: 16px; letter-spacing: 0; }
	.nh-act { padding: 9px 9px; }
	.nh-search { order: 3; flex: 1 1 100%; height: 44px; }
	.nh-search input[type="text"] { font-size: 16px; }
	.nh-act { padding: 9px 10px; }
	.nh-act .t { display: none; }
	.nh-classes { margin: 10px -12px 0; padding: 0 8px; }
	.nh-classes a { padding: 12px 10px 11px; font-size: 14px; }
	.nh-intro { padding: 0 12px; }
	body:has(#book) .nh-intro, body:has(#book) .nh-board { display: none; }
	.nh-board { padding: 10px 12px 12px; }
	.nh-board-in { grid-template-columns: 72px 1fr; column-gap: 12px; padding: 12px; }
	.nh-board-in .category-image img { width: 72px; }
	.nh-board-in .main-headline { font-size: 15px; }
	.nh-board-in ul + ul { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
	.nh-act[data-recentopen] { display: none; }
}

/* ---------- SEO-текст під списком категорії ---------- */
html { scroll-behavior: smooth; }
.cat-seo { clear: both; margin: 24px 0 10px; padding: 18px 20px; background: #faf8f3; border: 1px solid #ece7dc; border-radius: 12px; color: #555; font-size: 14px; line-height: 1.65; }
.cat-seo h2 { margin: 0 0 10px; font: 700 18px/1.3 Arial, sans-serif; color: #2f5d50; }
.cat-seo p { margin: 0 0 10px; }
.cat-seo p:last-child { margin-bottom: 0; }
@media (max-width: 1040px) { .cat-seo { padding: 14px; font-size: 14px; } }

/* ---------- «Ще підручники для цього класу» — сітка без обрізання ---------- */
#related-posts { height: auto !important; overflow: visible !important; width: auto !important; float: none !important; }
#related-posts ul { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 10px; }
#related-posts ul li { width: auto !important; margin: 0 !important; float: none !important; }
#related-posts .related-image img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 1040px) { #related-posts ul { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Меню предметів класу ---------- */
.nh-subjects { align-items: center; }
.nh-allcls { flex: 0 0 auto; margin: 6px 6px 6px 0; padding: 8px 12px; border-radius: 10px; border: 1px solid #e4e1da; background: #f4f4f2; font: 700 13px/1 Arial, sans-serif; color: #333; cursor: pointer; }
.nh-allcls:hover, .nh-allcls.open { border-color: #2f5d50; color: #2f5d50; }
.nh-subjects a.nh-cur { margin: 6px 4px 6px 0; padding: 8px 12px; border: 0; border-radius: 10px; background: #2f5d50; color: #fff !important; }
.nh-subjects a.nh-cur:hover { background: #244a40; color: #fff !important; }
.nh-subjects a { font-weight: 600; }
.nh-clsdrop { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0 12px; border-top: 1px solid #efece5; }
.nh-clsdrop[hidden] { display: none; }
.nh-clsdrop a { padding: 8px 12px; border-radius: 10px; background: #f4f4f2; border: 1px solid #e4e1da; font: 700 13px/1 Arial, sans-serif; color: #333 !important; text-decoration: none !important; }
.nh-clsdrop a:hover, .nh-clsdrop a.on { border-color: #2f5d50; color: #2f5d50 !important; }
@media (max-width: 1040px) { .nh-clsdrop { padding: 8px 0 10px; } }