/*
Theme Name: Lemac
Theme URI: https://lemac.nl
Author: Lemac
Description: Blokthema voor Lemac — landbouwtechniek uit Luttelgeest. Donker charcoal, Lemac-rood en de chevron als terugkerend structuurelement. Gebouwd op de opzet van wmt.zandijk.xyz.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lemac
Tags: full-site-editing, block-patterns, one-column, two-columns, custom-colors, custom-menu, editor-style, translation-ready, business
*/

/* ---------------------------------------------------------------
   Alles wat niet in theme.json kan. Kleuren en typografie komen uit
   theme.json, zodat de site-editor ze kan overschrijven.
   --------------------------------------------------------------- */

:root {
  --lemac-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 561 711'%3E%3Cpath fill='%23CF102D' d='M256.6 314 215.8 355.3 521.6 669.2 561.5 710.6H433.3l-96-.3L169.7 538.1C20.1 384.3 5.2 367.8 2.7 362.9l0-.0C-2.2 351.5-3.1 349.5 59.7 285.7L125 218.9c60.4-61.8 105.5-108 150.2-154L338.3.4l95.1.5 126.6 1.1-45 46.9c-37.7 39-207.5 213.3-258.4 265Z'/%3E%3C/svg%3E");
}

/* Chevron als opsommingsteken — het merkteken doet hier echt werk */
.wp-block-post-content ul:not(.wp-block-navigation):not(.wp-block-page-list) {
  list-style: none;
  padding-left: 0;
}
.wp-block-post-content ul:not(.wp-block-navigation):not(.wp-block-page-list) > li {
  position: relative;
  padding-left: 1.6em;
  margin-block: 0.45em;
}
.wp-block-post-content ul:not(.wp-block-navigation):not(.wp-block-page-list) > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.52em;
  height: 0.66em;
  background: #CF102D;
  -webkit-mask: var(--lemac-chevron) no-repeat center / contain;
  mask: var(--lemac-chevron) no-repeat center / contain;
  transform: scaleX(-1);
}

/* Introparagraaf */
.is-style-lead {
  font-weight: 400;
  line-height: 1.45;
  color: #1B1B1F;
  max-width: 40ch;
}
.has-ink-background-color .is-style-lead,
.has-contrast-background-color .is-style-lead { color: rgba(255,255,255,.82); }

/* Eyebrow-label */
.is-style-eyebrow {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--x-small);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #CF102D;
  margin-bottom: .6rem;
}

/* Donker paneel voor specificaties */
.is-style-panel {
  background: #1B1B1F;
  color: #fff;
  border-left: 3px solid #CF102D;
}
.is-style-panel :where(h1,h2,h3,h4,h5,h6) { color: #fff; }
.is-style-panel a { color: #fff; }

/* Kaart */
.is-style-card {
  background: #fff;
  border: 1px solid #E2E2E6;
  transition: border-color .18s ease, transform .18s ease;
}
.is-style-card:hover { border-color: #CF102D; transform: translateY(-2px); }

/* Header */
.lemac-header { border-bottom: 1px solid rgba(255,255,255,.10); }
.lemac-header .wp-block-navigation { font-size: .95rem; letter-spacing: .01em; }
.lemac-header .wp-block-navigation a:hover { color: #CF102D; }
.lemac-header .wp-block-site-logo img { display: block; }

/* Hero — de chevron loopt van de rand af, net als in het originele logo */
.lemac-hero { position: relative; overflow: hidden; isolation: isolate; }
.lemac-hero::before {
  content: "";
  position: absolute;
  left: -6%;
  top: 50%;
  translate: 0 -50%;
  width: min(46rem, 62%);
  aspect-ratio: 561 / 711;
  background: #CF102D;
  -webkit-mask: var(--lemac-chevron) no-repeat left center / contain;
  mask: var(--lemac-chevron) no-repeat left center / contain;
  opacity: .13;
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 781px) { .lemac-hero::before { opacity: .09; left: -22%; } }

/* Cijfers en registratiegegevens verdienen tabulaire cijfers */
.lemac-data, .lemac-data * {
  font-family: var(--wp--preset--font-family--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* Knoppen */
.wp-block-button__link {
  border-radius: 2px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background-color .18s ease, color .18s ease;
}
.is-style-outline > .wp-block-button__link { border-width: 1px; }

/* Afbeeldingen */
.wp-block-image img { border-radius: 2px; }
.wp-block-post-content figure.wp-block-image { margin-block: var(--wp--preset--spacing--50); }

/* Footer */
.lemac-footer a { color: inherit; text-decoration: none; }
.lemac-footer a:hover { color: #CF102D; text-decoration: underline; }

/* Toegankelijkheid */
:where(a, button, input, textarea, select, .wp-block-button__link):focus-visible {
  outline: 2px solid #CF102D;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Navigatie -------------------------------------------------- */
.lemac-nav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1.6rem;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500; font-size: .95rem;
}
.lemac-nav__list a { color: inherit; text-decoration: none; }
.lemac-nav__list a:hover { color: #CF102D; }
.lemac-nav__list a[aria-current="page"] {
  color: #CF102D;
  box-shadow: inset 0 -2px 0 #CF102D;
}

/* --- Taalwissel (NL / EN / DE) ----------------------------------- */
.lemac-langswitch {
  display: flex; align-items: center; gap: .1rem;
  font-family: var(--wp--preset--font-family--mono);
  font-size: .72rem; letter-spacing: .1em;
}
.lemac-langswitch__list {
  display: flex; gap: .1rem; list-style: none; margin: 0; padding: 0;
}
.lemac-langswitch__nu,
.lemac-langswitch__list a {
  display: block; padding: .3rem .5rem; border-radius: 2px;
  text-decoration: none; color: inherit; line-height: 1;
}
.lemac-langswitch__nu { background: #CF102D; color: #fff; font-weight: 700; }
.lemac-langswitch__list a { opacity: .62; border: 1px solid transparent; }
.lemac-langswitch__list a:hover { opacity: 1; border-color: currentColor; }

/* --- Footergegevens --------------------------------------------- */
.lemac-siteinfo {
  display: grid; gap: var(--wp--preset--spacing--40);
  grid-template-columns: 1.4fr 1fr 1fr;
}
@media (max-width: 781px) { .lemac-siteinfo { grid-template-columns: 1fr; } }
.lemac-siteinfo h4 {
  font-family: var(--wp--preset--font-family--display);
  font-size: .9rem; text-transform: uppercase; letter-spacing: .02em;
  margin: 0 0 .5rem;
}
.lemac-siteinfo p { color: #a9aab0; font-size: .9rem; margin: 0; }
.lemac-siteinfo a { color: inherit; }