/*
Theme Name: Machina
Theme URI: https://example.com/machina
Author: You
Author URI: https://example.com
Description: Business theme for machine companies with Projects (References) and Machine Park. Modern UI + custom diagonal header.
Version: 1.2.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: machina
*/
:root {
  --primary: #0f172a;
  --accent: #2563eb;
  --muted: #64748b;
  --bg: #ffffff;
  --light: #f1f5f9;
  --header-bg:#3e5661;
  --header-text:#ffffff;
  --header-sep:#ffffff;
}
body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin:0; color:#0f172a; background: var(--bg); line-height:1.6; letter-spacing:.01em; }
.container { max-width: 1100px; padding: 0 1rem; margin: 0 auto; }
.header { background: var(--header-bg); border-bottom:none; position: sticky; top:0; z-index:10; }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding: .75rem 0; gap: 1rem; }
.header .brand a, .header .brand { color: var(--header-text); }
.brand img{max-height:64px;height:auto;width:auto;display:block}
.header .nav ul { list-style:none; margin:0; padding:0; display:flex; align-items:center; }
.header .nav li { position:relative; padding: 0 1.5rem; }
.header .nav li + li::before {
  content:''; position:absolute; left:0; top:-10px; bottom:-10px; width:2px;
  background: var(--header-sep); transform: skewX(-20deg); transform-origin: left top; opacity:.9;
}
.header .nav a { color: var(--header-text); text-decoration:none; font-weight:500; }
.header .nav a:hover { opacity:.85; }
.header .right { display:flex; align-items:center; gap: 1.25rem; color: var(--header-text); }
.header .right a { color: var(--header-text); text-decoration:none; }
.icon { width:22px; height:22px; display:inline-block; vertical-align:middle; margin-right:.35rem; }
@media (max-width: 980px){
  .header-inner { flex-wrap:wrap; }
  .header .nav ul { flex-wrap:wrap; row-gap:.5rem; }
  .header .nav li + li::before{ display:none; }
}

/* General UI */
.hero { background: linear-gradient(180deg, var(--light), #fff); padding: 5rem 0 3rem; margin-bottom:2rem;}
.hero h1 { font-size: clamp(1.8rem, 3.5vw, 3rem); margin:0 0 0.75rem; }
.hero p { color: var(--muted); max-width: 60ch; }
.grid { display:grid; gap:1.25rem; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); }
.card { border:1px solid #e5e7eb; border-radius: 1rem; overflow:hidden; background:#fff; box-shadow: 0 1px 2px rgba(0,0,0,0.04); transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.card img { width:100%; height:200px; object-fit:cover; display:block; }
.card .p { padding:1rem; font-size:1rem; }
.badge { display:inline-block; font-size:0.75rem; background: var(--light); color: var(--muted); padding: .25rem .5rem; border-radius:.5rem; }
footer { margin-top: 3rem; padding: 2rem 0; background: var(--light); color: var(--muted); }
.btn { display:inline-block; padding:.75rem 1rem; border-radius:.75rem; background: var(--accent); color:#fff; text-decoration:none; border:none; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; box-shadow: 0 4px 10px rgba(37,99,235,.15); }
.btn.secondary { background:#0f172a; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(37,99,235,.25); }
main { padding: 2rem 0; }
h1,h2,h3 { line-height:1.2; }
h1 { font-weight: 700; letter-spacing: -0.02em; }
h2 { font-weight: 700; margin: 1.25rem 0 .75rem; }
.meta { font-size:.875rem; color: var(--muted); }
.single-hero { padding: 2rem 0; border-bottom: 1px solid #e5e7eb; background: #fff; }
.content { padding: 1rem 0; }
figure { margin:0; }
img.alignwide { width:100%; height:auto; }
.pagination { display:flex; gap:.5rem; margin-top:1.5rem; }
.pagination a { padding:.5rem .75rem; border:1px solid #e5e7eb; border-radius:.5rem; text-decoration:none; color:var(--primary); }
.pagination .current { background: var(--accent); color:#fff; border-color:var(--accent); }
.wp-block { max-width: 850px; }

/* Modern homepage hero */
.hero.modern { position: relative; padding: 6rem 0 5rem; border-radius: 1.25rem; overflow: hidden; }
.hero.modern .overlay { position:absolute; inset:0; background: linear-gradient(180deg, rgba(15,23,42,.55), rgba(15,23,42,.35)); }
.hero.modern .inner { position:relative; z-index:1; color:#fff; }
.hero.modern h1 { font-size: clamp(2rem, 4vw, 3.25rem); margin:0 0 .5rem; }
.hero.modern p { max-width: 60ch; color: #e2e8f0; }
.hero.modern .cta { margin-top:1.25rem; display:flex; gap:.75rem; flex-wrap:wrap; }
.hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; filter: contrast(105%) saturate(105%); transform: scale(1.03); }

/* CTA band */
.cta-band { margin-top:2rem; padding: 2rem; background: linear-gradient(90deg, var(--accent), #1e40af); color:#fff; border-radius: 1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.cta-band .cta-text { font-size: 1.1rem; font-weight:600; }
.cta-band .btn { background: #0f172a; box-shadow:none; }
.cta-band .btn:hover { background:#020617; transform:none; box-shadow:none; }

/* Fade-up animation */
@keyframes fadeUp { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: translateY(0); } }
.fade-up { animation: fadeUp .5s ease both; }
.fade-up.delay-1 { animation-delay: .1s; }
.fade-up.delay-2 { animation-delay: .2s; }
.fade-up.delay-3 { animation-delay: .3s; }