/*
Theme Name: KIERUTEC Elementor
Theme URI: https://kierutec.com
Author: KIERUTEC / 3DX Additive Manufacturing
Author URI: https://kierutec.com
Description: KIERUTEC — Invisible Architecture Platform. Elementor-ready WordPress theme. All original design preserved; fully editable via Elementor page builder.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: All Rights Reserved
License URI: https://kierutec.com
Text Domain: kierutec
Tags: business, custom-logo, full-width-template, one-column, elementor
*/

/* ============================================================
   KIERUTEC THEME — DESIGN SYSTEM
   All original CSS preserved exactly. No changes to frontend.
   ============================================================ */

:root {
  --void: #FFFFFF;
  --gold: #B8954A;
  --pearl: #1A1A1A;
  --ink: #F7F7F7;
  --carbon: #F0F0F0;
  --graphite: #E0E0E0;
  --ash: #999999;
  --stone: #666666;
  --mist: #555555;
  --cloud: #333333;
  --surface: #F2F2F0;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--void); color: var(--pearl);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
::selection { background: var(--gold); color: #FFFFFF; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--graphite); }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.serif { font-family: 'Playfair Display', serif; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: var(--void); border-bottom: 1px solid var(--graphite); padding: 0 clamp(24px, 5vw, 80px); }
.nav-inner { display: flex; justify-content: space-between; align-items: center; height: 64px; }
.nav-logo { cursor: pointer; display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-logo .kanji { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 400; color: var(--gold); }
.nav-logo .wordmark { font-size: 13px; font-weight: 500; color: var(--pearl); letter-spacing: 0.18em; }
.nav-right { display: flex; gap: 32px; align-items: center; }
.nav-link { cursor: pointer; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 300; color: var(--stone); transition: color 0.3s; display: none; text-decoration: none; }
.nav-link:hover, .nav-link.current-menu-item, .nav-link.current_page_item { color: var(--gold); }
@media (min-width: 900px) { .nav-link { display: inline; } }
.hamburger { cursor: pointer; display: flex; flex-direction: column; gap: 5px; padding: 8px; background: none; border: none; }
.hamburger span { width: 20px; height: 1px; background: var(--pearl); transition: all 0.3s; display: block; }
.hamburger.open span:first-child { background: var(--gold); transform: rotate(45deg) translate(2px, 2px); }
.hamburger.open span:last-child { background: var(--gold); transform: rotate(-45deg) translate(2px, -2px); }
.mobile-menu { position: absolute; top: 64px; left: 0; right: 0; background: var(--void); border-bottom: 1px solid var(--graphite); padding: 40px clamp(24px, 5vw, 80px); display: none; animation: fadeIn 0.3s ease; z-index: 9998; }
.mobile-menu.open { display: block; }
.mobile-menu-item { padding: 16px 0; cursor: pointer; border-bottom: 1px solid var(--graphite); font-size: 12px; font-weight: 300; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); transition: color 0.3s; text-decoration: none; display: block; }
.mobile-menu-item:hover { color: var(--gold); }

/* ============================================================
   PAGE WRAPPER — Elementor full-width support
   ============================================================ */
.kierutec-page-wrap {
  padding-top: 64px;
  min-height: 100vh;
  background: var(--void);
  animation: fadeIn 0.4s ease;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.label { display: flex; align-items: center; gap: 16px; margin-bottom: 48px; }
.label::before { content: ''; width: 32px; height: 0.5px; background: var(--gold); }
.label span { font-size: 9px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
h1 { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(36px, 6vw, 72px); line-height: 1.08; color: var(--pearl); margin-bottom: 32px; }
h2 { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(28px, 4vw, 48px); line-height: 1.15; color: var(--pearl); margin-bottom: 16px; }
h3 { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 24px; color: var(--pearl); margin-bottom: 24px; }
.body { font-weight: 300; font-size: 14px; line-height: 1.9; color: var(--stone); }
.btn { background: transparent; border: 1px solid var(--graphite); color: var(--stone); padding: 14px 36px; cursor: pointer; transition: all 0.3s; font-size: 9px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; display: inline-block; text-align: center; text-decoration: none; }
.btn:hover { border-color: var(--stone); color: var(--pearl); }
.btn-primary { border-color: var(--gold); color: var(--gold); }
.btn-primary:hover { background: var(--gold); color: var(--void); }

/* ============================================================
   SECTION / COMPONENT CLASSES — preserved from original
   ============================================================ */
.family-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 1px; border-top: 1px solid var(--graphite); }
.family-strip-item { padding: 28px 8px; cursor: pointer; border-bottom: 1px solid var(--graphite); text-align: center; transition: background 0.3s; }
.family-strip-item:hover { background: var(--surface); }
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 64px; max-width: 900px; }
.pillars-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; }
.pillar-card { padding: 32px 28px; background: var(--surface); border-left: 1px solid var(--graphite); }
.adv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; }
.adv-card { background: var(--surface); padding: 28px 24px; border-left: 1px solid var(--graphite); }
.accordion-item { border-bottom: 1px solid var(--graphite); padding: 28px 0; cursor: pointer; }
.accordion-item:first-child { border-top: 1px solid var(--graphite); }
.accordion-header { display: flex; justify-content: space-between; align-items: center; }
.accordion-header-left { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.accordion-toggle { font-size: 16px; color: var(--gold); transition: transform 0.3s; flex-shrink: 0; }
.accordion-body { padding-top: 20px; padding-left: 44px; max-width: 520px; display: none; animation: fadeIn 0.3s ease; }
.accordion-item.open .accordion-body { display: block; }
.accordion-item.open .accordion-toggle { transform: rotate(45deg); }
.brand-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 48px; }
.brand-item { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--graphite); }
.voice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.voice-card { padding: 20px 0; border-top: 1px solid var(--graphite); }
.words-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.words-box { padding: 20px; background: var(--surface); }
.gap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.gap-stat { padding: 20px 0; border-top: 1px solid var(--graphite); }
.contact-item { border-bottom: 1px solid var(--graphite); padding-bottom: 24px; margin-bottom: 32px; }
.partner-card { padding: 32px 28px; background: var(--surface); border-left: 1px solid var(--graphite); }
.partner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; }
.benefit-item { padding: 20px 0; border-bottom: 1px solid var(--graphite); display: flex; gap: 16px; align-items: baseline; }
.family-card-grid { column-count: 3; column-gap: 24px; }
.family-card { background: transparent; border: 1px solid var(--graphite); transition: border-color 0.3s; break-inside: avoid; margin-bottom: 24px; }
.family-card:hover { border-color: var(--stone); }
.family-card-img { position: relative; background: var(--surface); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; min-height: 280px; }
.family-card-img p { font-size: 11px; font-weight: 500; letter-spacing: 0.15em; color: var(--ash); text-transform: uppercase; }
.family-card-img .sub { font-size: 9px; font-weight: 300; letter-spacing: 0.1em; color: var(--graphite); }
.family-card-badge { position: absolute; top: 16px; right: 16px; font-size: 8px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold); padding: 4px 12px; background: var(--surface); }
.family-card-body { padding: 28px 28px 32px; }

/* ============================================================
   IMAGES
   ============================================================ */
.img-full { width: 100%; aspect-ratio: 21/9; background: var(--surface); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.img-hero { width: 100%; aspect-ratio: 16/7; background: var(--surface); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.img-half { width: 100%; aspect-ratio: 4/3; background: var(--surface); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.img-tall { width: 100%; aspect-ratio: 3/4; background: var(--surface); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.img-label { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ash); text-align: center; }
.img-label span { display: block; font-size: 8px; color: var(--graphite); margin-top: 6px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer { background: var(--void); border-top: 1px solid var(--graphite); padding: 64px clamp(24px, 5vw, 80px); }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 48px; }
.footer-links { display: flex; gap: 48px; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col span { font-size: 11px; font-weight: 300; color: var(--stone); cursor: pointer; transition: color 0.3s; }
.footer-col span:hover { color: var(--pearl); }
.footer-col a { font-size: 11px; font-weight: 300; color: var(--stone); cursor: pointer; transition: color 0.3s; text-decoration: none; }
.footer-col a:hover { color: var(--pearl); }
.footer-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--graphite); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

/* ============================================================
   ELEMENTOR OVERRIDES
   Elementor injects its own padding/margin; we neutralise what
   conflicts with the KIERUTEC design without touching the editor.
   ============================================================ */

/* Remove Elementor default page padding on full-width pages */
.elementor-section-wrap,
.elementor-inner,
.elementor-container {
  /* allow Elementor full-width to work correctly */
}

/* Ensure Elementor widgets inherit brand typography */
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.9;
  color: var(--stone);
}

.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3 {
  font-family: 'Playfair Display', serif;
}

/* Buttons from Elementor button widget pick up brand style when class added */
.elementor-widget-button .elementor-button.kierutec-btn-primary {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 14px 36px;
  transition: all 0.3s;
}
.elementor-widget-button .elementor-button.kierutec-btn-primary:hover {
  background: var(--gold);
  color: var(--void);
}
.elementor-widget-button .elementor-button.kierutec-btn-secondary {
  background: transparent;
  border: 1px solid var(--graphite);
  color: var(--stone);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 14px 36px;
  transition: all 0.3s;
}
.elementor-widget-button .elementor-button.kierutec-btn-secondary:hover {
  border-color: var(--stone);
  color: var(--pearl);
}

/* Elementor image widget — match .img-hero, .img-half, .img-full styling */
.elementor-widget-image.kierutec-img-hero .elementor-widget-container img {
  width: 100%;
  aspect-ratio: 16/7;
  object-fit: cover;
}
.elementor-widget-image.kierutec-img-full .elementor-widget-container img {
  width: 100%;
  aspect-ratio: 21/9;
  object-fit: cover;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .family-strip { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
  .brand-grid, .voice-grid, .words-grid, .gap-grid, .partner-grid { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr; gap: 32px; }
  .product-header, .product-specs-row { grid-template-columns: 1fr !important; }
  .img-duo { grid-template-columns: 1fr !important; }
  .two-col { grid-template-columns: 1fr !important; gap: 32px !important; }
  .flex-grid { grid-template-columns: 1fr !important; }
  .family-card-grid { column-count: 2; }
  .cert-row { flex-direction: column; align-items: flex-start !important; }
  h1 { font-size: 32px !important; }
  h2 { font-size: 26px !important; }
  .pillars-grid { grid-template-columns: 1fr; }
  .adv-grid { grid-template-columns: 1fr 1fr; }
  .img-full { aspect-ratio: 16/9; }
  .img-hero { aspect-ratio: 4/3; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .footer-bottom { flex-direction: column; gap: 16px; }
}
@media (max-width: 480px) {
  .adv-grid { grid-template-columns: 1fr; }
  .family-strip { grid-template-columns: 1fr 1fr; }
  .family-card-grid { column-count: 1; }
  .btn { padding: 14px 24px; font-size: 9px; width: 100%; text-align: center; }
  .nav-inner { height: 56px; }
  .kierutec-page-wrap { padding-top: 56px !important; }
}

/* TABLE RESPONSIVE */
table { width: 100%; }
@media (max-width: 600px) {
  .product-specs-row table td { font-size: 10px !important; padding: 10px 0 !important; }
}

/* ============================================================
   WORDPRESS ADMIN BAR OFFSET
   ============================================================ */
.admin-bar .nav {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .nav {
    top: 46px;
  }
}

/* ============================================================
   ELEMENTOR EDITOR — hide nav/footer inside editor iframe
   so they don't interfere with the canvas
   ============================================================ */
body.elementor-editor-active .nav,
body.elementor-editor-active footer {
  display: none;
}
body.elementor-editor-active .kierutec-page-wrap {
  padding-top: 0;
}