/* =========================================================
   ARTECH DISTRIBUTION — theme stylesheet
   Design language: deep red + charcoal + white, corporate B2B tech.
   ========================================================= */

:root{
  --c-red: #c8102e;
  --c-red-dark: #9c0c23;
  --c-charcoal: #14161a;
  --c-charcoal-soft: #1e2127;
  --c-white: #ffffff;
  --c-gray-50: #f6f7f9;
  --c-gray-100: #eceef1;
  --c-gray-300: #c7cbd1;
  --c-gray-500: #6b7280;
  --c-gray-700: #374151;
  --c-line: #e3e5e9;
  --c-text: #191b1f;

  --font-heading: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --container: 1240px;
  --shadow-card: 0 1px 2px rgba(20,22,26,.04), 0 8px 24px rgba(20,22,26,.06);
  --shadow-card-hover: 0 4px 10px rgba(20,22,26,.06), 0 16px 40px rgba(20,22,26,.10);
  --transition: 180ms ease;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--c-text);
  background: var(--c-white);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family: var(--font-heading); font-weight:800; line-height:1.15; margin: 0 0 .5em; color: var(--c-charcoal); }
h1{ font-size: clamp(2.1rem, 4vw, 3.2rem); }
h2{ font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3{ font-size: 1.15rem; }
p{ margin: 0 0 1em; color: var(--c-gray-700); }

:focus-visible{ outline: 2px solid var(--c-red); outline-offset: 2px; }

.screen-reader-text{
  position:absolute !important; clip:rect(1px,1px,1px,1px);
  width:1px; height:1px; overflow:hidden; white-space:nowrap;
}
.skip-link{
  position:absolute; left:1rem; top:-60px; z-index:9999;
  background: var(--c-charcoal); color:#fff; padding:.6rem 1rem; border-radius: var(--radius-sm);
  transition: top .2s ease;
}
.skip-link:focus{ top:1rem; clip:auto; width:auto; height:auto; }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 20px; }

.site-wrapper{ display:flex; flex-direction:column; min-height:100vh; }
.site-main{ flex:1 1 auto; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding: .85rem 1.5rem; border-radius: var(--radius-sm);
  font-weight:700; font-size:.95rem; border:1px solid transparent;
  transition: all var(--transition);
}
.btn-primary{ background: var(--c-red); color:#fff; }
.btn-primary:hover{ background: var(--c-red-dark); }
.btn-outline{ background: transparent; color: var(--c-charcoal); border-color: var(--c-gray-300); }
.btn-outline:hover{ border-color: var(--c-charcoal); }
.btn-primary-invert{ background:#fff; color: var(--c-charcoal); }
.btn-primary-invert:hover{ background: var(--c-gray-100); }
.btn-outline-invert{ background: transparent; color:#fff; border-color: rgba(255,255,255,.4); }
.btn-outline-invert:hover{ border-color: #fff; }
.btn-b2b{ background: var(--c-charcoal); color:#fff; padding:.6rem 1.1rem; font-size:.85rem; }
.btn-b2b:hover{ background: var(--c-red); }
.btn-large{ padding: 1rem 2rem; font-size: 1.05rem; }
.btn-block{ width:100%; }

.text-link{ font-weight:700; color: var(--c-red); white-space: nowrap; }
.text-link:hover{ text-decoration: underline; }

/* ---------- Header ---------- */
.site-header{ position: sticky; top:0; z-index: 500; background:#fff; border-bottom:1px solid var(--c-line); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:76px; }
.site-branding img{ max-height:44px; width:auto; }
.site-title{ font-family: var(--font-heading); font-weight:800; font-size:1.3rem; color: var(--c-charcoal); }

.primary-nav{ flex:1; display:flex; justify-content:center; }
.nav-menu{ display:flex; align-items:center; gap:2rem; }
.nav-menu > li{ position:relative; }
.nav-menu > li > a{
  font-weight:600; font-size:.95rem; color: var(--c-charcoal); padding: 1.6rem 0; display:inline-block;
  border-bottom: 2px solid transparent;
}
.nav-menu > li > a:hover{ color: var(--c-red); }
.nav-menu > li.current-menu-item > a{ color: var(--c-red); border-color: var(--c-red); }

.header-actions{ display:flex; align-items:center; gap: .75rem; }
.lang-switch{ display:flex; align-items:center; gap:.35rem; font-size:.85rem; font-weight:700; color: var(--c-gray-500); }
.lang-switch a{ color: var(--c-gray-500); padding:.2rem; }
.lang-switch a.is-active{ color: var(--c-red); }
.lang-switch a:hover{ color: var(--c-charcoal); }
.lang-switch-mobile{ margin-top:1rem; font-size:1rem; justify-content:flex-start; gap:.6rem; }
.search-toggle, .menu-toggle{
  background:none; border:none; padding:.5rem; color: var(--c-charcoal); display:flex; align-items:center;
}
.menu-toggle{ display:none; flex-direction:column; gap:4px; }
.menu-toggle span{ width:22px; height:2px; background: currentColor; display:block; }

.header-search{ border-top:1px solid var(--c-line); padding: 1rem 0; background: var(--c-gray-50); }
.header-search[hidden]{ display:none; }

/* Mega menu: shown for the "Products" nav item (id set via JS by matching link text/slug) */
.mega-menu{
  position:absolute; left:0; right:0; top:100%;
  background:#fff; border-top:3px solid var(--c-red); box-shadow: var(--shadow-card-hover);
  opacity:0; visibility:hidden; transform: translateY(-8px);
  transition: all var(--transition);
}
.nav-menu > li.has-mega:hover .mega-menu,
.nav-menu > li.has-mega.is-open .mega-menu{
  opacity:1; visibility:visible; transform:none;
}
.mega-menu-inner{ display:grid; grid-template-columns: repeat(4, 1fr); gap:2rem; padding: 2rem 20px; }
.mega-menu-heading{ font-weight:800; color: var(--c-charcoal); display:block; margin-bottom:.75rem; }
.mega-menu-heading:hover{ color: var(--c-red); }
.mega-menu-col ul li{ margin-bottom:.4rem; }
.mega-menu-col ul li a{ color: var(--c-gray-700); font-size:.92rem; }
.mega-menu-col ul li a:hover{ color: var(--c-red); }
.mega-menu-cta{ background: var(--c-gray-50); border-radius: var(--radius-md); padding:1.25rem; }
.mega-menu-cta p{ font-size:.9rem; margin-bottom:.75rem; }

/* Mobile menu */
.mobile-menu{ display:none; }
.mobile-menu[hidden]{ display:none; }

/* ---------- Hero ---------- */
.hero{ padding: 4.5rem 0; background: var(--c-charcoal); color:#fff; overflow:hidden; }
.hero-inner{ display:grid; grid-template-columns: 1.1fr .9fr; gap:3rem; align-items:center; }
.hero .eyebrow{ color: var(--c-red); font-weight:700; letter-spacing:.03em; text-transform:uppercase; font-size:.8rem; margin-bottom:1rem; }
.hero h1{ color:#fff; }
.hero-subtext{ color: var(--c-gray-300); font-size:1.05rem; max-width: 46ch; }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.5rem; }
.hero-media{ position:relative; }
.hero-graphic{ aspect-ratio:1/1; color: var(--c-red); }
.hero-graphic svg{ width:100%; height:100%; }

/* ---------- Sections ---------- */
section{ padding: 4.5rem 0; }
.alt-bg{ background: var(--c-gray-50); }
.section-heading{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:2.5rem; flex-wrap:wrap; }
.section-heading h2{ margin:0; }

/* Intro */
.intro-inner{ display:grid; grid-template-columns: .3fr .7fr; gap:3rem; align-items:center; }
.intro-figure{ display:flex; flex-direction:column; border-left:3px solid var(--c-red); padding-left:1.25rem; }
.intro-year{ font-family: var(--font-heading); font-weight:800; font-size:3rem; line-height:1; color: var(--c-charcoal); }
.intro-year-label{ color: var(--c-gray-500); font-weight:600; margin-top:.4rem; }

/* Brands */
.brand-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:1.25rem; }
.brand-tile{
  display:flex; align-items:center; justify-content:center; height:110px;
  border:1px solid var(--c-line); border-radius: var(--radius-md); padding:1rem;
  background:#fff; transition: all var(--transition); filter: grayscale(1); opacity:.75;
}
.brand-tile:hover{ filter:none; opacity:1; border-color: var(--c-red); box-shadow: var(--shadow-card); }
.brand-tile img{ max-height:60px; width:auto; }
.brand-tile-name{ font-weight:800; color: var(--c-charcoal); font-size:1.1rem; }
.brand-tile-name.large{ font-size:1.6rem; }

.brand-card-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.5rem; }
.brand-card{ padding:2rem; border:1px solid var(--c-line); border-radius: var(--radius-lg); text-align:center; background:#fff; box-shadow: var(--shadow-card); transition: all var(--transition); }
.brand-card:hover{ box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.brand-card-logo{ display:flex; justify-content:center; align-items:center; height:70px; margin-bottom:1rem; }

/* Category cards */
.category-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:1.5rem; }
.category-card{
  display:flex; flex-direction:column; gap:.5rem; padding: 2rem;
  background:#fff; border:1px solid var(--c-line); border-radius: var(--radius-lg);
  transition: all var(--transition);
}
.category-card:hover{ border-color: var(--c-red); box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.category-card-icon{ color: var(--c-red); margin-bottom:.5rem; }
.category-card-cta{ font-weight:700; color: var(--c-red); margin-top:auto; }

/* Solutions */
.solution-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:1.5rem; }
.solution-card{
  position:relative; display:block; padding:2.25rem; background: var(--c-charcoal); color:#fff;
  border-radius: var(--radius-lg); overflow:hidden; transition: all var(--transition);
}
.solution-card:hover{ background: var(--c-red-dark); }
.solution-card h3{ color:#fff; margin-top:.5rem; }
.solution-card p{ color: var(--c-gray-300); }
.solution-number{ font-family: var(--font-heading); font-weight:800; font-size:1.4rem; color: var(--c-red); }
.solution-card:hover .solution-number{ color:#fff; }
.solution-arrow{ position:absolute; right:1.75rem; bottom:1.75rem; font-size:1.4rem; }

/* Why */
.why-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:2rem; }
.why-index{ display:block; font-family: var(--font-heading); font-weight:800; font-size:1.6rem; color: var(--c-red); margin-bottom:.5rem; }

/* Products */
.product-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:1.5rem; }
.card{ background:#fff; border:1px solid var(--c-line); border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-card); transition: all var(--transition); }
.card:hover{ box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.card-media{ position:relative; display:block; aspect-ratio: 4/3; background: var(--c-gray-100); overflow:hidden; }
.card-media img{ width:100%; height:100%; object-fit:cover; transition: transform .3s ease; }
.card:hover .card-media img{ transform: scale(1.04); }
.card-media-placeholder{ width:100%; height:100%; background: linear-gradient(135deg, var(--c-gray-100), var(--c-gray-300)); }
.card-media-placeholder.large{ aspect-ratio:4/3; border-radius: var(--radius-lg); }
.card-badge{ position:absolute; top:.75rem; left:.75rem; background: rgba(20,22,26,.85); color:#fff; font-size:.72rem; font-weight:700; padding:.25rem .6rem; border-radius: 4px; }
.card-body{ padding: 1.25rem; display:flex; flex-direction:column; gap:.4rem; }
.card-eyebrow{ font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color: var(--c-red); font-weight:700; }
.card-title{ font-size:1.05rem; margin:0; }
.card-title a:hover{ color: var(--c-red); }
.card-excerpt{ font-size:.9rem; margin:0; }
.card-link{ font-size:.85rem; font-weight:700; color: var(--c-red); margin-top:auto; }

.post-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.5rem; }

/* Filters (Products archive) */
.content-layout{ display:grid; grid-template-columns: 260px 1fr; gap:2.5rem; align-items:start; }
.filters .filter-group{ margin-bottom:2rem; }
.filters h3{ font-size:.9rem; text-transform:uppercase; letter-spacing:.03em; color: var(--c-gray-500); margin-bottom:.75rem; }
.filter-list{ display:flex; flex-direction:column; gap:.35rem; }
.filter-btn{
  background:none; border:none; text-align:left; padding:.4rem .6rem; border-radius: var(--radius-sm);
  color: var(--c-gray-700); font-size:.92rem; font-weight:500;
}
.filter-btn:hover{ background: var(--c-gray-50); }
.filter-btn.is-active{ background: var(--c-red); color:#fff; font-weight:700; }
.filter-empty{ text-align:center; padding:3rem 0; color: var(--c-gray-500); }

/* Why section grid collapses at same breakpoints as category grid — see media queries */

/* Final CTA */
.final-cta{ background: var(--c-charcoal); color:#fff; text-align:center; }
.final-cta.small{ padding: 3rem 0; border-radius: var(--radius-lg); margin: 3rem 0; }
.final-cta-inner h2{ color:#fff; max-width: 26ch; margin: 0 auto .5em; }
.final-cta .hero-actions, .final-cta-inner .hero-actions{ justify-content:center; margin-top:1.5rem; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--c-charcoal); color: var(--c-gray-300); }
.footer-inner{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:2.5rem; padding: 4rem 0 3rem; }
.footer-col h3{ color:#fff; font-size:.95rem; text-transform:uppercase; letter-spacing:.03em; margin-bottom:1rem; }
.footer-col ul li{ margin-bottom:.6rem; }
.footer-col a:hover{ color:#fff; }
.footer-logo-text{ font-family: var(--font-heading); font-weight:800; font-size:1.3rem; color:#fff; }
.social-links{ display:flex; gap:.75rem; margin-top:1rem; }
.social-links a{ width:36px; height:36px; border-radius:50%; background: rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; }
.social-links a:hover{ background: var(--c-red); }
.footer-contact li{ color: var(--c-gray-300); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); }
.footer-bottom-inner{ display:flex; justify-content:space-between; align-items:center; padding: 1.25rem 0; flex-wrap:wrap; gap:1rem; font-size:.85rem; }
.footer-legal-menu{ display:flex; gap:1.5rem; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{ padding: 1.25rem 0; font-size:.85rem; color: var(--c-gray-500); }
.breadcrumbs ol{ display:flex; flex-wrap:wrap; gap:.4rem; }
.breadcrumbs li:not(:last-child)::after{ content:"/"; margin-left:.4rem; color: var(--c-gray-300); }
.breadcrumbs a:hover{ color: var(--c-red); }

/* ---------- Generic content pages ---------- */
.page-header{ padding: 2rem 0 1rem; }
.page-header.centered{ text-align:center; }
.archive-header{ padding: 1rem 0 2.5rem; max-width: 60ch; }
.prose :is(h2,h3){ margin-top:1.5em; }
.prose p, .prose li{ color: var(--c-gray-700); }

.about-stats{ display:flex; gap:3rem; justify-content:center; padding: 2rem 0 3rem; border-bottom:1px solid var(--c-line); margin-bottom: 3rem; }
.about-stat{ text-align:center; }
.about-stat-number{ display:block; font-family: var(--font-heading); font-weight:800; font-size:2.2rem; color: var(--c-red); }
.about-stat-label{ color: var(--c-gray-500); font-weight:600; font-size:.9rem; }

/* Product / brand detail */
.product-detail, .brand-detail{ display:grid; grid-template-columns: .9fr 1.1fr; gap:3rem; padding: 2rem 0 3rem; align-items:start; }
.product-detail-media img, .brand-detail-logo img{ border-radius: var(--radius-lg); border:1px solid var(--c-line); }
.brand-detail-logo{ display:flex; align-items:center; justify-content:center; background: var(--c-gray-50); border-radius: var(--radius-lg); padding:3rem; }
.product-cats{ display:flex; gap:.5rem; margin-bottom:1rem; }
.product-cats a{ background: var(--c-gray-100); padding:.3rem .7rem; border-radius: 999px; font-size:.8rem; font-weight:600; }
.product-actions{ display:flex; gap:1rem; margin-top:1.5rem; flex-wrap:wrap; }
.specs-section{ padding-top:0; }
.spec-table{ width:100%; border-collapse:collapse; }
.spec-table tr{ border-bottom:1px solid var(--c-line); }
.spec-table th, .spec-table td{ text-align:left; padding:.75rem 1rem; font-size:.92rem; }
.spec-table th{ width:35%; color: var(--c-gray-500); font-weight:600; }
.benefits-box{ background: var(--c-gray-50); border-radius: var(--radius-lg); padding: 1.5rem; }
.benefit-list li{ padding-left:1.4rem; position:relative; margin-bottom:.6rem; color: var(--c-gray-700); }
.benefit-list li::before{ content:"✓"; position:absolute; left:0; color: var(--c-red); font-weight:800; }

.b2b-hero{ text-align:center; max-width: 60ch; margin: 0 auto; padding-bottom:3rem; }

/* Contact */
.contact-layout{ display:grid; grid-template-columns: 1fr 1fr; gap:3rem; padding: 1rem 0 3rem; align-items:start; }
.contact-detail-list{ margin: 1.5rem 0; }
.contact-detail-list li{ display:flex; flex-direction:column; padding: .75rem 0; border-bottom:1px solid var(--c-line); }
.contact-detail-list strong{ font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; color: var(--c-gray-500); margin-bottom:.2rem; }
.contact-map iframe{ border-radius: var(--radius-lg); margin-top:1rem; }
.contact-form-wrap{ background: var(--c-gray-50); border-radius: var(--radius-lg); padding: 2rem; }
.form-row{ margin-bottom:1.1rem; }
.form-row-split{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-row label{ display:block; font-size:.85rem; font-weight:700; margin-bottom:.4rem; }
.form-row input, .form-row textarea{
  width:100%; padding:.75rem .9rem; border:1px solid var(--c-gray-300); border-radius: var(--radius-sm);
  font-family: inherit; font-size:.95rem; background:#fff;
}
.form-row input:focus, .form-row textarea:focus{ border-color: var(--c-red); }
.form-honeypot{ position:absolute; left:-9999px; }
.form-status{ padding:.9rem 1.1rem; border-radius: var(--radius-sm); margin-bottom:1.25rem; font-size:.9rem; }
.form-status.success{ background:#e7f6ec; color:#1a7a3d; }
.form-status.error{ background:#fbe9e9; color: var(--c-red-dark); }

/* Search form */
.search-form{ display:flex; max-width:520px; margin: 0 auto; }
.search-form input[type="search"]{ flex:1; padding:.7rem 1rem; border:1px solid var(--c-gray-300); border-radius: var(--radius-sm) 0 0 var(--radius-sm); font-size:.95rem; }
.search-form button{ background: var(--c-red); color:#fff; border:none; padding: 0 1.1rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.error-404{ text-align:center; padding: 5rem 0; }
.error-code{ font-family: var(--font-heading); font-weight:800; font-size:5rem; color: var(--c-gray-300); margin:0; }
.error-404 .search-form{ margin: 2rem auto; }

/* Reveal-on-scroll */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1023px){
  .content-layout{ grid-template-columns: 1fr; }
  .filters{ order:2; display:flex; gap:2rem; flex-wrap:wrap; }
  .product-grid, .category-grid, .why-grid{ grid-template-columns: repeat(2,1fr); }
  .brand-grid{ grid-template-columns: repeat(3,1fr); }
  .post-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-inner{ grid-template-columns: 1fr 1fr; }
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-media{ order:-1; max-width: 320px; margin: 0 auto; }
  .intro-inner{ grid-template-columns: 1fr; gap:1.5rem; }
  .product-detail, .brand-detail, .contact-layout{ grid-template-columns: 1fr; }
}

@media (max-width: 767px){
  .primary-nav{ display:none; }
  .menu-toggle{ display:flex; }
  .header-actions .btn-b2b{ display:none; }
  .mobile-menu{
    position:fixed; inset:76px 0 0 0; background:#fff; z-index:400; overflow-y:auto;
    padding: 1.5rem 20px 3rem;
  }
  .mobile-menu[hidden]{ display:none; }
  .mobile-nav-menu li a{ display:block; padding: .9rem 0; border-bottom:1px solid var(--c-line); font-weight:600; font-size:1.05rem; }
  .mobile-menu .btn-b2b{ margin-top:1.5rem; }

  .product-grid, .category-grid, .why-grid, .solution-grid, .post-grid, .brand-card-grid{ grid-template-columns: 1fr 1fr; }
  .solution-grid{ grid-template-columns: 1fr; }
  .brand-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-inner{ grid-template-columns: 1fr; text-align:left; }
  .about-stats{ gap:1.5rem; flex-wrap:wrap; }
  section{ padding: 3rem 0; }
  .hero{ padding: 3rem 0; }
  .form-row-split{ grid-template-columns:1fr; }
}

@media (max-width: 480px){
  .product-grid, .category-grid, .why-grid, .post-grid, .brand-card-grid{ grid-template-columns: 1fr; }
  .brand-grid{ grid-template-columns: repeat(2,1fr); }
  h1{ font-size: 1.9rem; }
}

/* Print */
@media print{
  .site-header, .site-footer, .mobile-menu, .mega-menu{ display:none; }
}