/* =========================================================
   Mochnik Glass — design system
   Oparte na palecie: Vellum / Paper / Carbon / Onyx / Mercury
   ========================================================= */
:root{
  --color-vellum:#f0efe9;
  --color-paper:#ffffff;
  --color-carbon:#322d2a;
  --color-onyx:#0f0e12;
  --color-mercury:#8b8b8b;

  --font-base: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-label:12px;
  --text-body-sm:14px;
  --text-body:16px;
  --text-subheading:22px;
  --text-heading:32px;
  --text-display:52px;

  --section-gap:48px;
  --card-padding:22px;
  --element-gap:8px;
  --max-width:1200px;

  --radius-small:8px;
  --radius-body:12px;
  --radius-nav:16px;
  --radius-buttons:16px;
  --radius-cards:80px;
  --radius-pill:100px;
}

/* ---------- Base ---------- */
html{scroll-behavior:smooth;}
body{
  background:var(--color-vellum);
  color:var(--color-carbon);
  font-family:var(--font-base);
  font-weight:400;
  font-size:var(--text-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block;}
a{color:inherit; text-decoration:none;}
.mg-wrap{max-width:var(--max-width); margin:0 auto; padding:0 24px;}

h1,h2,h3,h4,h5,h6{
  font-weight:300;
  letter-spacing:0.01em;
  margin:0 0 24px;
  color:var(--color-carbon);
}
h1{font-size:var(--text-display); line-height:1;}
h2{font-size:40px; line-height:1.1;}
h3{font-size:var(--text-heading); font-weight:400; line-height:1.2;}
p{margin:0 0 16px;}

/* ---------- Section label (signature element) ---------- */
.mg-label{
  display:flex; align-items:center; gap:8px;
  font-size:var(--text-label);
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--color-carbon);
  margin-bottom:16px;
  font-weight:400;
}
.mg-label::before{
  content:"";
  width:4px; height:4px;
  background:var(--color-carbon);
  display:inline-block;
  flex:none;
}
.mg-label.is-light{color:#fff;}
.mg-label.is-light::before{background:#fff;}

/* ---------- Buttons ---------- */
.mg-btn, .elementor-button{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:400; font-family:var(--font-base);
  padding:16px 26px !important;
  border-radius:var(--radius-pill) !important;
  transition:opacity .15s, background .15s, color .15s;
  box-shadow:none !important;
  border-width:1px;
}
.mg-btn-filled, .elementor-button.mg-btn-filled{
  background:var(--color-carbon); color:#fff !important; border:none;
}
.mg-btn-filled:hover{opacity:.85;}
.mg-btn-ghost, .elementor-button.mg-btn-ghost{
  border:1px solid var(--color-carbon); color:var(--color-carbon) !important; background:transparent;
}
.mg-btn-ghost:hover{background:var(--color-carbon); color:#fff !important;}
.mg-btn-ghost-light{border:1px solid #fff; color:#fff !important; background:transparent;}
.mg-btn-ghost-light:hover{background:#fff; color:var(--color-carbon) !important;}

/* ---------- Image radius utilities (use as CSS classes in Elementor "Advanced > CSS Classes") ---------- */
.mg-radius-card img, .mg-radius-card.elementor-widget-container img{border-radius:var(--radius-cards) !important;}
.mg-radius-body img{border-radius:var(--radius-body) !important;}
.mg-radius-small img{border-radius:var(--radius-small) !important;}
.mg-no-shadow, .mg-no-shadow *{box-shadow:none !important;}

/* ---------- Site header / nav pill ---------- */
.site-header{
  position:sticky; top:0; z-index:999;
  padding:20px 24px 0;
  background:transparent;
}
.site-nav-pill{
  max-width:var(--max-width);
  margin:0 auto;
  background:var(--color-carbon);
  border-radius:var(--radius-nav);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 22px;
  color:#fff;
  gap:16px;
  flex-wrap:wrap;
}
.site-branding{
  font-size:15px;
  font-weight:400;
  letter-spacing:0.02em;
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  color:#fff;
}
.site-branding .mg-dot{width:6px;height:6px;background:#fff;border-radius:2px;}
.site-branding img{max-height:28px; width:auto;}

.primary-menu{
  display:flex;
  gap:24px;
  list-style:none;
  margin:0; padding:0;
  font-size:14px;
  flex-wrap:wrap;
}
.primary-menu li{position:relative;}
.primary-menu a{opacity:.85; transition:opacity .15s; color:#fff;}
.primary-menu a:hover{opacity:1;}
.primary-menu ul{ /* submenu */
  display:none;
  position:absolute; top:100%; left:0;
  background:var(--color-carbon);
  padding:12px; border-radius:var(--radius-small);
  min-width:200px; list-style:none; margin-top:8px;
}
.primary-menu li:hover > ul{display:block;}
.primary-menu ul li{padding:6px 0;}

.nav-right{display:flex; align-items:center; gap:16px; font-size:14px; white-space:nowrap; color:#fff;}
.nav-right a.mg-btn-filled{background:#fff; color:var(--color-carbon) !important;}
.menu-toggle{display:none; background:none; border:none; color:#fff; font-size:22px; cursor:pointer;}

@media(max-width:960px){
  .primary-menu{display:none; flex-direction:column; gap:12px; width:100%; order:3;}
  .primary-menu.is-open{display:flex;}
  .site-nav-pill{flex-wrap:wrap;}
  .menu-toggle{display:block;}
}

/* ---------- Generic content section (used on page.php fallback) ---------- */
.mg-section{padding:64px 0;}
.entry-content{padding:64px 0;}
.entry-content img{border-radius:var(--radius-body);}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--color-onyx);
  color:#fff;
  margin-top:64px;
  padding:64px 0 30px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:32px;
  padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.footer-grid h4{
  font-size:12px; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--color-mercury); font-weight:400; margin:0 0 18px;
}
.footer-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:14px;}
.footer-grid ul a{opacity:.85; color:#fff;}
.footer-grid ul a:hover{opacity:1;}
.footer-widget p{color:var(--color-mercury); font-size:14px; line-height:1.6;}
.footer-logo{font-size:18px; margin-bottom:16px; display:flex; align-items:center; gap:8px; color:#fff;}
.footer-logo .mg-dot{width:6px;height:6px;background:#fff; display:inline-block;}
.footer-bottom{
  display:flex; justify-content:space-between; padding-top:24px;
  font-size:13px; color:var(--color-mercury); flex-wrap:wrap; gap:12px;
  max-width:var(--max-width); margin:0 auto; padding-left:24px; padding-right:24px;
}
@media(max-width:860px){ .footer-grid{grid-template-columns:1fr 1fr; gap:32px 20px;} }

/* ---------- Elementor helpers ---------- */
.elementor-widget-heading .elementor-heading-title{font-weight:300;}
.elementor-section, .elementor-column, .elementor-widget-wrap{box-shadow:none !important;}

/* ---------- Classes used by the home-page template (mochnik-glass-strona-glowna.json) ---------- */
.mg-hero-section{border-radius:var(--radius-body);}
.mg-hero-col{border-radius:var(--radius-body);}
.mg-hero-section, .mg-hero-section .elementor-container{border-radius:var(--radius-body); overflow:hidden;}
.mg-hero-col .elementor-widget-heading .elementor-heading-title{color:#fff !important;}

.mg-stats-row{border-top:1px solid rgba(50,45,42,.15); border-bottom:1px solid rgba(50,45,42,.15);}

.mg-brand-col{position:relative; overflow:hidden; min-height:440px;}
.mg-brand-col::before{
  content:"";
  position:absolute; inset:0;
  background:rgba(15,14,18,.45);
  pointer-events:none;
}
.mg-brand-col > .elementor-widget-wrap{position:relative; z-index:2; align-self:flex-end;}

.mg-cta-strip{border-radius:var(--radius-body);}

/* Full-width sections should still respect the 1200px content column */
.mg-hero-section > .elementor-container,
.mg-cta-strip > .elementor-container{max-width:var(--max-width); margin:0 auto;}