/* =======================================================================
   KARPODROM — forest-green + amber palette, background, slider & layout.  (v6)
   Loaded as a SEPARATE file (new URL) so caches/CDN pick it up immediately;
   this site strips ?ver query strings, so cache-busting is done via FILENAME.
   To force a refresh after future edits: bump the filename (-v7) here AND in
   the wp_enqueue_style() call in functions.php. Same trick for renamed images.
   ======================================================================= */

/* ---- page background (overrides WP custom-background inline <style>) ---- */
body,
body.custom-background {
	background-color:#1e3a2f !important;
	background-image:url(../images/bg-karpo.jpg) !important;
	background-repeat:no-repeat !important;
	background-position:top center !important;
	background-attachment:fixed !important;
	background-size:100% auto !important;
}

/* ---- links & titles ---- */
a { color:#f2f2ec; }
a:hover { color:#e0a435; }
.post-title a { color:#f4f1e6; }
.post-title a:hover { color:#e0a435; }

/* ---- search ---- */
#s { background:#2a4d3a; color:#fff; }
#searchsubmit { background-image:url(../images/search-amber.png) !important; }   /* was teal donor icon */

/* ---- main menu bar (rubrics): solid panel instead of translucent mainmenu.png ---- */
#main-menu {
	background:#2a4d3a !important;
	border-radius:15px;
	box-shadow:0 2px 8px rgba(0,0,0,0.35);
}
#main-menu > ul > li > a { color:#f4f1e6; }
#main-menu > ul > li > a:hover {
	background:#e0a435 !important;
	color:#20321f !important;
	border-radius:12px;
}

/* ---- secondary (top) menu + dropdowns ---- */
#secondary-menu a:hover { color:#e0a435; }
.menu ul, #secondary-menu .menu ul { background:#24402f; }
.menu ul a { border-bottom:1px solid #356049; text-shadow:0 0 1px #16281e; color:#e7efe7 !important; }
.menu ul a:hover, #secondary-menu .menu ul a:hover { color:#e0a435 !important; }

/* ---- pagination ---- */
.next.page-numbers, .prev.page-numbers { background:#356049; }
.pagination.numeric a, .pagination.wp a { background:#2a4d3a; color:#fff; }
.pagination.numeric span, .pagination.numeric a:hover, .pagination.wp a:hover { background:#e0a435; color:#20321f; }

/* ---- sidebar / widgets (accents) ---- */
.widget_lztabs .scaption { background:#2a4d3a; color:#fff; }
.widget_lztabs .scaption.active, .widget_lztabs .scaption:hover { background:#e0a435; color:#20321f; }
#content-body .widget ul li a:hover { color:#e0a435; }
.tagcloud a { background:#24402f; color:#fff; }
.commentlist article { border-color:#356049; }
#container .post-body table th:not(#order_review table th){ border-bottom:2px solid #356049; }
#container .post-body table td:not(#order_review table td){ border-bottom:1px solid #2a4d3a; }

/* ---- footer ---- */
#footer .widgets h3 { background:#356049; }
#footer a:hover, .copyright a:hover { color:#e0a435; }

/* ---- content panels: opaque so text is readable over the dark bg ----
   the donor used ~20% translucent tiles which let the dark forest show through. */
.hentry, .entry,
.page .hentry {
	background:#1f362b url(../images/copyright.png) left top !important;
	box-shadow:0 2px 12px rgba(0,0,0,0.30);
}
.copyright { background:#1f362b url(../images/copyright.png) left top !important; }
#content-body .widget:not(.widget_search) {
	background:#1f362b url(../images/sidebar-widget-back.png) !important;
	box-shadow:0 2px 10px rgba(0,0,0,0.25);
}
#secondsidebar { background:#1f362b !important; border-color:#2a4d3a !important; }
.post-body, .post-body p, .post-body li, .entry, .hentry, .post-meta, .post-meta a,
.sidebar h3, #content-body .widget, #content-body .widget li { color:#f2f2ec; }

/* ---- showroom: clean cards that fill the row width evenly ----
   donor cards used fixed widths + an overlapping image (margin:0 -25px, max-width:190)
   which overflowed the column (4th card wrapped left) and left uneven framing.
   Flexbox cards: image fills the card top, title below, equal heights, centered. */
.showroom-block {
	display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch;
	gap:14px; width:auto; max-width:900px; margin:26px auto 10px; padding:10px 0;
}
.showroom-block .item {
	flex:1 1 200px; max-width:220px; min-width:180px;
	float:none !important; margin:0 !important; padding:0 !important;
	background:#223a2e !important; border-radius:12px; overflow:hidden; text-align:left;
	box-shadow:0 2px 8px rgba(0,0,0,0.28);
}
.showroom-block .item a { display:block; }
.showroom-block .item .wp-post-image {
	float:none !important; margin:0 !important;
	width:100% !important; max-width:100% !important; height:auto !important; max-height:none !important;
	border-radius:0 !important; display:block;
}
.showroom-block .item-content {
	float:none !important; margin:0 !important; width:auto !important; height:auto !important;
	padding:10px 12px !important; background:none !important; border-radius:0 !important;
}
.showroom-block .item h3, .showroom-block .item a h3 {
	color:#f4f1e6 !important; font-size:15px !important; line-height:19px !important;
	max-height:none !important; text-shadow:none !important;
}
.showroom-block .item p { color:#cfe3d0 !important; text-shadow:none !important; }

/* ---- slider: full-width 960x392 category banners ----
   aspect-ratio keeps the height correct even if the donor JS measures the first
   slide before its image loads (otherwise the slider collapses to a thin strip). */
#slider { width:auto; max-width:900px; height:auto; background:none; margin:26px auto; }
#slider .container { padding:0; }
#slider .slides { aspect-ratio:960/392 !important; height:auto !important; }
.slides p { margin:0 !important; padding:0 !important; }
.slide { width:auto; height:auto; margin:0 auto; }
.slides img { width:100%; height:auto; padding:0; border-radius:14px; display:block; box-shadow:0 2px 10px rgba(0,0,0,0.35); }
.slider-previews { text-align:center; margin-top:10px; }
.slider-previews img { width:70px; height:auto; margin:0 4px; border-radius:6px; opacity:0.6; border:2px solid transparent; }
.slider-previews img:hover { opacity:1; border-color:#e0a435; }

/* ---- mobile/tablet leftovers from the donor (teal) ---- */
@media only screen and (max-width:1023px) {
	.sidebar { background:#223a2e; }
	#main-menu { background:none !important; box-shadow:none; }   /* donor collapses the bar here */
}
@media only screen and (max-width:639px) {
	#header #searchform { background:#2a4d3a !important; }   /* was #63A29E teal pill */
}