/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Description: Child theme with a custom 404 page for ZK Digital.
Version: 1.0
*/

.zk404 { --bg:#FFFDF7; --ink:#1C1917; --muted:#57534E; --accent:#FF9900; --deep:#B45309; --night:#131921; font-family:'Poppins',sans-serif; color:var(--ink); }
.zk404 *, .zk404 *::before, .zk404 *::after { box-sizing:border-box; }

.zk404__hero { background:var(--bg); padding:clamp(3rem,8vw,7rem) 1.5rem; text-align:center; }
.zk404__inner { max-width:44rem; margin:0 auto; }

.zk404__num { display:flex; justify-content:center; align-items:center; gap:clamp(.4rem,2vw,1.2rem); font-weight:700; line-height:1; font-size:clamp(6rem,24vw,14rem); letter-spacing:-.04em; margin:0; }
.zk404__disc { width:.78em; height:.78em; border-radius:50%; background:var(--accent); display:inline-block; animation:zk404drop .9s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes zk404drop { from { transform:translateY(-40%) scale(.85); opacity:0; } to { transform:none; opacity:1; } }

.zk404 h1 { font-size:clamp(1.6rem,4vw,2.4rem); font-weight:700; line-height:1.1; margin:1.5rem 0 .9rem; color:var(--ink); }
.zk404__text { color:var(--muted); font-size:1.05rem; line-height:1.7; max-width:34rem; margin:0 auto 2rem; }

.zk404__actions { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-bottom:2.5rem; }
.zk404__btn { display:inline-block; padding:.95rem 2.2rem; border-radius:999px; font-weight:600; font-size:1rem; text-decoration:none; transition:background .2s,color .2s; }
.zk404__btn--primary { background:var(--accent); color:var(--ink); border:1px solid var(--accent); }
.zk404__btn--primary:hover { background:var(--deep); border-color:var(--deep); color:#fff; }
.zk404__btn--ghost { background:transparent; color:var(--ink); border:1px solid var(--ink); }
.zk404__btn--ghost:hover { background:var(--ink); color:var(--bg); }

.zk404__search { display:flex; max-width:28rem; margin:0 auto; border:1px solid var(--ink); border-radius:999px; overflow:hidden; background:#fff; }
.zk404__search input { flex:1; min-width:0; border:0; padding:.9rem 1.4rem; font:inherit; background:transparent; color:var(--ink); outline:0; }
.zk404__search button { border:0; background:var(--ink); color:var(--bg); padding:0 1.6rem; font:inherit; font-weight:600; cursor:pointer; }
.zk404__search:focus-within { outline:3px solid var(--accent); outline-offset:2px; }
.zk404__search button:hover { background:var(--deep); }

.zk404__band { background:var(--night); color:#fff; padding:clamp(2.5rem,6vw,4.5rem) 1.5rem; }
.zk404__band-in { max-width:60rem; margin:0 auto; }
.zk404__band h2 { font-size:1.25rem; font-weight:600; margin:0 0 1.5rem; color:#fff; }
.zk404__list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1rem; }
.zk404__list a { display:block; height:100%; padding:1.25rem 1.4rem; border:1px solid rgba(255,255,255,.18); border-radius:20px; color:#fff; text-decoration:none; font-weight:500; line-height:1.4; transition:border-color .2s,background .2s; }
.zk404__list a:hover { border-color:var(--accent); background:rgba(255,153,0,.08); }
.zk404__list small { display:block; margin-top:.4rem; color:rgba(255,255,255,.6); font-weight:400; }

.zk404 a:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { .zk404__disc { animation:none; } }