/*
Theme Name: Sandart
Description: Plain custom theme for sandart.co.com. No page builder, no build tools, no plugins required. Visual style follows the old Sandart site (dark top bar, white header with two-line menu, serif headings, green accents, dark footer).
Version: 1.0.7
Requires at least: 6.4
Requires PHP: 7.4
Author: Daniel Steinmann
Text Domain: sandart
*/

/* ---------- Tokens (change colours and sizes here) ---------- */
:root {
	--green: #8acd2a;        /* accents: menu underline, footer heading rule */
	--green-link: #4e8a0c;   /* link text (darker than --green for readable contrast) */
	--green-bar: #6a9a2b;    /* advantage bars */
	--text: #666666;
	--heading: #4a4a4a;
	--muted: #8a8a8a;
	--line: #eeeeee;
	--topbar: #313131;
	--footer: #222222;
	--footer-bottom: #111111;
	--wrap: 1180px;
	--font-body: Shanti, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-head: Ledger, Georgia, "Times New Roman", serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: #fff;
	color: var(--text);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.7;
}
img, video { max-width: 100%; height: auto; }
a { color: var(--green-link); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
h1, h2, h3, h4, h5 {
	font-family: var(--font-head);
	font-weight: 400;
	color: var(--heading);
	line-height: 1.25;
	margin: 0 0 .6em;
}
h1 { font-size: 34px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
p { margin: 0 0 1.2em; }
hr, .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 40px 0;
	max-width: none;
}
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 1000;
	width: auto; height: auto; clip: auto;
	background: #fff; color: #000; padding: 10px 14px;
}

/* ---------- Top bar ---------- */
.topbar { background: var(--topbar); color: #d0d0d0; font-size: 12px; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 37px; gap: 16px; }
.topbar a { color: #d0d0d0; }
.topbar a:hover { color: #fff; text-decoration: none; }
.topbar ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; }
.topbar svg { width: 16px; height: 16px; fill: currentColor; vertical-align: middle; }

/* ---------- Header and menu ---------- */
.site-header { background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .08); position: relative; z-index: 20; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 110px; gap: 20px; }
.site-branding img, .custom-logo { display: block; width: auto; max-height: 72px; }
.site-title { font-family: var(--font-head); font-size: 34px; color: var(--heading); }
.site-title:hover { text-decoration: none; }

.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 30px; }
.main-nav li { position: relative; }
.main-nav a {
	display: block;
	padding: 28px 0 24px;
	color: var(--heading);
	font-size: 14px;
	line-height: 1.3;
	text-align: center;
	border-bottom: 3px solid transparent;
}
.main-nav a:hover { text-decoration: none; color: var(--green-link); }
.main-nav .nav-sub { display: block; font-size: 11px; color: var(--muted); }
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.main-nav .current-menu-ancestor > a {
	color: var(--green-link);
	border-bottom-color: var(--green);
}
.menu-toggle {
	display: none;
	background: none;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 11px 10px;
	width: 46px;
	height: 42px;
	cursor: pointer;
	flex-direction: column;
	justify-content: space-between;
}
/* Hamburger icon: three bars, turning into a cross when the menu is open */
.menu-toggle-bar { display: block; width: 100%; height: 2px; background: var(--heading); border-radius: 1px; transition: transform .2s, opacity .2s; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ---------- Content ---------- */
.site-main { padding: 40px 0 60px; }
.page-title { text-align: center; margin-bottom: 1em; }
.entry-content > *:first-child { margin-top: 0; }
.entry-content .alignwide { max-width: none; }
.hero { margin: 0; }
.hero img { display: block; width: 100%; max-height: 520px; object-fit: cover; }
.page-banner img { max-height: 300px; }

/* Core column blocks: comfortable spacing like the old three-column home */
.wp-block-columns { gap: 40px; margin-bottom: 1.5em; }
.wp-block-image figcaption { font-size: 13px; color: var(--muted); }

/* Home page intro: centered H1, lead line, buttons */
.home-intro { max-width: 860px; margin: 0 auto 30px; text-align: center; }
.home-intro h1 { font-size: 40px; margin-bottom: .4em; }
.lead { font-size: 19px; color: var(--heading); }
.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--green-link);
	border: 2px solid var(--green-link);
	padding: 9px 22px;
}
.is-style-outline > .wp-block-button__link:hover { background: var(--green-link); color: #fff; }

/* Button rows (core Buttons block): centered, with gaps, and space around them.
   The block layout CSS is not loaded in this classic theme, so it is set here. */
.wp-block-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 1.6em 0 2.2em; }
.wp-block-buttons > .wp-block-button { margin: 0; }
.wp-block-button__link { display: inline-block; text-align: center; }

/* Product tiles (add class "product-tiles" to a Columns block) */
.product-tiles h3 { font-size: 20px; margin-top: .6em; }
.product-tiles h3 a { color: var(--heading); }
.product-tiles h3 a:hover { color: var(--green-link); text-decoration: none; }
.product-tiles .wp-block-image { margin-bottom: 0; }
.product-tiles .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* "Why Sandart" row (add class "why-list" to a List block; start each item with a bold lead) */
.why-list { list-style: none; margin: 0 0 1.5em; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 28px; }
.why-list li { border-top: 3px solid var(--green); padding-top: 14px; margin: 0; }
.why-list strong { display: block; font-family: var(--font-head); font-size: 18px; font-weight: 400; color: var(--heading); margin-bottom: 4px; }

/* Centered section headings in the content (use the heading block's "center" alignment) */
.has-text-align-center { text-align: center; }

/* Download links, simple file list (class "sandart-downloads" on a List block) */
.sandart-downloads { list-style: none; padding: 0; }
.sandart-downloads li { border-bottom: 1px solid var(--line); padding: 10px 0; }

/* Tables (production schedule, specs) */
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table td, .wp-block-table th { border: 1px solid #ddd; padding: 8px 10px; }

/* Blog / news list */
.post-item { margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.post-meta { font-size: 13px; color: var(--muted); }
.pagination { display: flex; justify-content: space-between; margin-top: 30px; }

/* Basic form styling for any form plugin */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea, select {
	width: 100%;
	max-width: 640px;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 3px;
	font: inherit;
	color: var(--heading);
	background: #fff;
}
input[type="submit"], button[type="submit"], .wp-block-button__link {
	background: var(--green-bar);
	color: #fff;
	border: 0;
	border-radius: 3px;
	padding: 11px 24px;
	font: inherit;
	cursor: pointer;
}
input[type="submit"]:hover, button[type="submit"]:hover, .wp-block-button__link:hover { background: #5a8423; text-decoration: none; }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer); color: #cfcfcf; font-size: 14px; }
.footer-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 50px 20px 40px; }
.site-footer h2 {
	font-size: 19px;
	color: #fff;
	margin-bottom: 18px;
	padding-bottom: 12px;
	position: relative;
}
.site-footer h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 30px; height: 2px; background: var(--green); }
.site-footer a { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 6px; }
.site-footer address { font-style: normal; line-height: 1.8; }
.footer-bottom { background: var(--footer-bottom); color: #cfcfcf; text-align: center; font-size: 12px; padding: 16px 20px; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
	.menu-toggle { display: flex; }
	.main-nav { display: none; width: 100%; }
	.main-nav.is-open { display: block; }
	.site-header .wrap { flex-wrap: wrap; min-height: 80px; padding-top: 12px; padding-bottom: 12px; }
	.main-nav ul { flex-direction: column; gap: 0; }
	.main-nav a { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--line); }
	.main-nav .current-menu-item > a, .main-nav .current_page_item > a { border-bottom-color: var(--green); }
	.footer-columns { grid-template-columns: 1fr; gap: 30px; }
	h1 { font-size: 28px; }
	h2 { font-size: 24px; }
	.topbar .wrap { flex-direction: column; align-items: flex-start; padding-top: 8px; padding-bottom: 8px; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }