/*
Theme Name: 3D Letters BE
Theme URI: https://3dletters.be
Description: Custom basethema voor 3D Letters België — full-width, kleuren en lettertypes
Author: 3D Letters
Version: 1.1
*/

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── DESIGN TOKENS ── */
:root {
  --bg:        #F7F5F1;
  --bg2:       #F0EDE7;
  --bg3:       #E8E4DC;
  --card:      #FFFFFF;
  --border:    #DDD9D0;
  --border2:   #CBC6BB;
  --text:      #1A1714;
  --text-dim:  #8A8278;
  --text-mid:  #5A5550;
  --cyan:      #06B6D4;
  --cyan-dk:   #0E7490;
  --cyan-bg:   rgba(6,182,212,0.08);
  --orange:    #F97316;
  --orange-dk: #C2410C;
}

/* ── BASE ── */
html  { scroll-behavior: smooth; }
body  { background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; overflow-x: hidden; }
a     { text-decoration: none; color: inherit; }
img   { max-width: 100%; display: block; }

/* ── FULL WIDTH — override every theme container ── */
.site,
.site-content,
#content,
#primary,
.entry-content,
.wp-block-group,
.alignfull,
.elementor-section-boxed > .elementor-container {
  max-width: 100% !important;
  width: 100%   !important;
  padding-left:  0 !important;
  padding-right: 0 !important;
  margin-left:  0 !important;
  margin-right: 0 !important;
}

/* Elementor sections go edge-to-edge */
.elementor-section.elementor-section-stretched {
  left: 0 !important;
  width: 100% !important;
}

/* ── SHARED UTILITY CLASSES (available inside Elementor HTML widgets) ── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--cyan); font-weight: 600;
}
.eyebrow::before,
.eyebrow::after {
  content: ''; display: block;
  width: 24px; height: 1px;
  background: var(--cyan); opacity: .5;
}

.btn-primary {
  background: var(--cyan); color: #fff;
  padding: 14px 36px; font-size: 12px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  display: inline-block; transition: background .2s, transform .15s;
  border: none; cursor: pointer;
}
.btn-primary:hover { background: var(--cyan-dk); transform: translateY(-1px); }

.btn-secondary {
  border: 1.5px solid var(--border2); color: var(--text-mid);
  padding: 14px 36px; font-size: 12px; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase;
  display: inline-block; transition: all .2s;
  background: transparent; cursor: pointer;
}
.btn-secondary:hover { border-color: var(--cyan); color: var(--cyan); }

.section-label {
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--cyan); font-weight: 600; margin-bottom: 10px;
  display: block;
}

/* ── NAV & FOOTER — handled by Elementor ── */
/* push page content below fixed nav if needed */
body.page { padding-top: 0; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .site-nav { padding: 16px 24px; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 600px) {
  .site-nav { padding: 14px 16px; }
  .footer-inner { grid-template-columns: 1fr; }
  .site-footer { padding: 40px 20px 20px; }
}