/*
Theme Name: TensorCAD Classic
Theme URI: https://example.com/
Author: OpenAI
Description: Klassiek WordPress thema geïnspireerd op de aangeleverde TensorCAD website-afbeelding. Responsive, met horizontaal menu, linker zijbalk en compacte contentkolom.
Version: 1.0.4
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: tensorcad-classic
*/

:root {
  --page-bg: #a8bed0;
  --panel-bg: #ffffff;
  --line: #9ca8b1;
  --menu-top: #ffffff;
  --menu-bottom: #d8d8d8;
  --menu-active: #f5f5f5;
  --sidebar: #c9e0f2;
  --sidebar-line: #a8c6dc;
  --accent: #e6451f;
  --brand: #271a67;
  --text: #161616;
  --link: #2f8dc5;
  --footer: #e8ebed;
}

* { box-sizing: border-box; }
html { background: var(--page-bg); }
body {
  margin: 0;
  color: var(--text);
  background: var(--page-bg);
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.45;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

.site-shell {
  width: min(970px, calc(100% - 28px));
  margin: 8px auto 14px;
  background: var(--panel-bg);
  border: 1px solid #7c8790;
  box-shadow: 0 0 6px rgba(0,0,0,.28);
}

.site-header {
  position: relative;
  min-height: 100px;
  overflow: hidden;
  background: linear-gradient(#fff 0%, #fff 75%, #eef4f8 100%);
  border-bottom: 1px solid #8d989f;
}

.branding {
  position: relative;
  z-index: 2;
  padding: 20px 18px 8px;
}
.site-title {
  margin: 0;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: clamp(34px, 5vw, 52px);
  line-height: .95;
  letter-spacing: 6px;
  color: var(--brand);
  text-transform: uppercase;
  text-shadow: 0 2px 2px rgba(0,0,0,.18);
}
.site-tagline {
  margin: 7px 0 0 76px;
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.header-cad {
  position: absolute;
  right: 76px;
  top: 0;
  width: 270px;
  height: 92px;
  object-fit: cover;
  transform: rotate(-2deg);
  opacity: .96;
}

.main-menu {
  position: relative;
  z-index: 1000;
  border-top: 1px solid #c8c8c8;
  border-bottom: 1px solid #888;
  background: linear-gradient(var(--menu-top), var(--menu-bottom));
  overflow: visible;
}

/* Alleen de bovenste UL is de horizontale menubalk. */
.main-menu > ul {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-menu > ul > li {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  border-right: 1px solid #929292;
}

.main-menu > ul > li:last-child {
  border-right: 0;
}

.main-menu > ul > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 8px 7px;
  color: #1f1f1f;
  text-align: center;
  line-height: 1.25;
  font-weight: 600;
  text-decoration: none;
}

.main-menu > ul > .current-menu-item > a,
.main-menu > ul > .current-menu-ancestor > a,
.main-menu > ul > .current_page_item > a,
.main-menu > ul > .current_page_ancestor > a,
.main-menu > ul > li > a:hover,
.main-menu > ul > li > a:focus {
  background: linear-gradient(#fff, #efefef);
  color: #005b88;
}

/* Alle onderliggende niveaus zijn dropdowns en nemen nooit deel aan de flex-rij. */
.main-menu > ul .sub-menu,
.main-menu > ul .children {
  display: none !important;
  position: absolute;
  top: 100%;
  left: -1px;
  z-index: 10000;
  width: 230px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #f3f3f3;
  border: 1px solid #929292;
  box-shadow: 0 3px 6px rgba(0,0,0,.22);
}

.main-menu > ul li:hover > .sub-menu,
.main-menu > ul li:focus-within > .sub-menu,
.main-menu > ul li:hover > .children,
.main-menu > ul li:focus-within > .children {
  display: block !important;
}

.main-menu > ul .sub-menu li,
.main-menu > ul .children li {
  position: relative;
  display: block;
  float: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #c5c5c5;
}

.main-menu > ul .sub-menu li:last-child,
.main-menu > ul .children li:last-child {
  border-bottom: 0;
}

.main-menu > ul .sub-menu a,
.main-menu > ul .children a {
  display: block;
  width: 100%;
  padding: 10px 14px;
  color: #1f1f1f;
  text-align: left;
  line-height: 1.3;
  white-space: normal;
  background: linear-gradient(#fff, #e5e5e5);
  text-decoration: none;
}

.main-menu > ul .sub-menu a:hover,
.main-menu > ul .sub-menu a:focus,
.main-menu > ul .children a:hover,
.main-menu > ul .children a:focus {
  background: #dbeaf4;
  color: #005b88;
}

/* Derde niveau opent rechts naast het tweede niveau. */
.main-menu > ul .sub-menu .sub-menu,
.main-menu > ul .children .children {
  top: -1px;
  left: 100%;
}

/* Harde reset: alleen de directe UL van nav.main-menu mag flex zijn.
   Alle geneste UL-elementen zijn dropdowns, ongeacht WordPress menu-id of extra classes. */
.main-menu > ul ul {
  display: none !important;
  float: none !important;
  flex: none !important;
}
.main-menu > ul li:hover > ul,
.main-menu > ul li:focus-within > ul {
  display: block !important;
}

/* Extra bescherming voor de WordPress beheerbalk. */
#wpadminbar {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 999999 !important;
}

.site-content-wrap {
  display: grid;
  grid-template-columns: 228px minmax(0,1fr);
  gap: 18px;
  padding: 14px 10px 28px 8px;
}

.sidebar { padding: 0 0 0 0; }
.language-switcher {
  margin: 2px 0 14px 8px;
  font-size: 14px;
}
.language-switcher span { display:block; margin: 2px 0; }

.search-box {
  display: flex;
  gap: 0;
  padding: 7px;
  margin-bottom: 8px;
  background: var(--sidebar);
  border-radius: 2px;
}
.search-box input[type="search"] {
  min-width: 0;
  flex: 1;
  height: 24px;
  border: 1px solid #bdd0df;
  background: white;
}
.search-box button {
  border: 0;
  padding: 0 12px;
  background: #9ba9b2;
  color: white;
  cursor: pointer;
}

.widget {
  margin: 0 0 8px;
  padding: 11px 14px 12px;
  background: var(--sidebar);
  border: 1px solid #bed6e7;
}
.widget-title {
  margin: 0 0 12px;
  color: #0d0d0d;
  font-size: 12px;
  font-weight: 700;
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { margin: 7px 0; padding-left: 17px; position: relative; }
.widget li::before {
  content: "»";
  position: absolute;
  left: 0;
  top: 0;
  color: #4098cd;
}

.content-area { min-width: 0; padding: 0 18px 0 0; }
.front-intro { text-align: center; margin: 0 0 24px; }
.front-intro .small-logo { width: 250px; margin: 0 auto 24px; display: block; }
.front-intro .lead { font-weight: 700; font-size: 14px; }
.hero-image { display:block; width: min(620px,100%); margin: 46px auto 26px; border: 0; }

.entry-content,
.entry-summary { font-size: 13px; }
.entry-content p { margin: 0 0 14px; }
.entry-content h1, .entry-content h2, .entry-content h3 { font-family: Tahoma,Verdana,Arial,sans-serif; }
.entry-title { margin-top: 0; font-size: 23px; }
.check-list { list-style: none; padding: 0; margin: 10px 0 28px; }
.check-list li { margin: 2px 0; }
.check-list li::before { content: "✓ "; font-weight: 700; }

.site-footer {
  background: var(--footer);
  border-top: 1px solid #d6dadd;
  text-align: center;
  color: #00729d;
  padding: 11px 12px;
  font-size: 11px;
}

.nav-links { display:flex; justify-content:space-between; margin-top:24px; }

@media (max-width: 760px) {
  .site-shell { width: min(100% - 14px, 970px); }
  .header-cad { opacity: .24; right: 0; width: 48%; }
  .site-tagline { margin-left: 0; letter-spacing: 1px; }
  .main-menu > ul { flex-wrap: wrap; }
  .main-menu > ul > li { flex: 1 1 33.333%; }
  .site-content-wrap { grid-template-columns: 1fr; padding: 12px; }
  .sidebar { order: 2; }
  .content-area { order: 1; padding-right: 0; }
  .hero-image { margin-top: 22px; }
}

@media (max-width: 480px) {
  .site-title { letter-spacing: 3px; }
  .site-tagline { font-size: 11px; }
  .main-menu > ul > li { flex-basis: 50%; }
}