/*
Theme Name:   Hello Child - crypto-swap
Template:     hello-elementor
Version:      1.8.0
Description:  Child theme for crypto-swap.online with custom header.
*/

.cs-header{
  --cs-ink:#0B0F19;
  --cs-line:#1E2433;
  --cs-text:#C9CFDB;
  --cs-muted:#8E97AB;
  --cs-accent:#B8F23A;
  position:sticky; top:0; z-index:999;
  background:var(--cs-ink);
  border-bottom:1px solid var(--cs-line);
  font-family:'Nunito','Segoe UI',system-ui,sans-serif;
}
.cs-header *{box-sizing:border-box;}
.cs-header__inner{
  max-width:1200px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}

/* Logo */
.cs-logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff;}
.cs-logo__mark{
  width:36px; height:36px; border-radius:10px; background:transparent;
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.cs-logo__text{
  font-family:'Nunito','Segoe UI',sans-serif; font-weight:800;
  font-size:1.05rem; letter-spacing:-0.01em; color:#fff;
}
.cs-logo__text span{color:var(--cs-muted);}

/* Nav */
.cs-nav{display:flex; align-items:center; gap:4px;}
.cs-nav__link{
  color:var(--cs-text); text-decoration:none; font-weight:700; font-size:1.02rem;
  padding:12px; border-radius:8px; transition:color .15s, background .15s;
}
.cs-nav__link:hover{color:#fff; background:#161C2A;}
.cs-nav__link[aria-current="page"]{color:#fff;}
.cs-nav__cta{
  margin-left:8px; background:var(--cs-accent); color:var(--cs-ink);
  text-decoration:none; font-weight:800; font-size:1.02rem;
  padding:12px 20px; border-radius:999px; white-space:nowrap;
  transition:filter .15s;
}
.cs-nav__cta:hover{filter:brightness(1.08); color:var(--cs-ink);}
.cs-nav a:focus-visible,.cs-logo:focus-visible,.cs-burger:focus-visible{
  outline:2px solid var(--cs-accent); outline-offset:2px;
}

/* Mobile toggle (hidden on desktop) */
.cs-toggle{position:absolute; opacity:0; pointer-events:none;}
.cs-burger{
  display:none; width:44px; height:44px; border-radius:10px; cursor:pointer;
  align-items:center; justify-content:center; border:1px solid var(--cs-line);
}
.cs-burger span,.cs-burger span::before,.cs-burger span::after{
  display:block; width:20px; height:2px; background:#fff; border-radius:2px;
  position:relative; transition:transform .2s, background .2s;
}
.cs-burger span::before,.cs-burger span::after{content:""; position:absolute; left:0;}
.cs-burger span::before{top:-6px;}
.cs-burger span::after{top:6px;}

@media (max-width:900px){
  .cs-burger{display:inline-flex;}
  .cs-nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--cs-ink); border-bottom:1px solid var(--cs-line);
    padding:8px 24px 20px;
  }
  .cs-nav__link{padding:14px 12px; font-size:1rem;}
  .cs-nav__cta{margin:10px 0 0; text-align:center;}
  .cs-toggle:checked ~ .cs-nav{display:flex;}
  .cs-toggle:checked + .cs-burger span{background:transparent;}
  .cs-toggle:checked + .cs-burger span::before{transform:translateY(6px) rotate(45deg);}
  .cs-toggle:checked + .cs-burger span::after{transform:translateY(-6px) rotate(-45deg);}
}
@media (prefers-reduced-motion:reduce){
  .cs-header *{transition:none !important;}
}

/* ================= FOOTER ================= */
.cs-footer{
  --cs-ink:#0B0F19;
  --cs-line:#1E2433;
  --cs-text:#C9CFDB;
  --cs-muted:#8E97AB;
  --cs-accent:#B8F23A;
  background:var(--cs-ink);
  color:var(--cs-text);
  font-family:'Nunito','Segoe UI',system-ui,sans-serif;
  padding:64px 0 40px;
  margin-top:0;
}
.cs-footer *{box-sizing:border-box;}
.cs-footer__inner{max-width:1200px; margin:0 auto; padding:0 24px; display:flex; flex-direction:column; gap:40px;}
.cs-footer__grid{display:grid; grid-template-columns:1.4fr repeat(3, minmax(0,1fr)); gap:32px;}
.cs-footer__brand{display:flex; flex-direction:column; gap:14px;}
.cs-footer__brand p{margin:0; font-size:0.92rem; line-height:1.6; max-width:280px;}
.cs-footer__col{display:flex; flex-direction:column; gap:10px;}
.cs-footer__title{color:#fff; font-size:0.95rem; font-weight:700; margin:0 0 4px;}
.cs-footer__col a{color:var(--cs-text); text-decoration:none; font-size:0.92rem; padding:4px 0; transition:color .15s;}
.cs-footer__col a:hover{color:var(--cs-accent);}
.cs-footer a:focus-visible{outline:2px solid var(--cs-accent); outline-offset:2px;}
.cs-footer__bottom{border-top:1px solid var(--cs-line); padding-top:24px; display:flex; flex-direction:column; gap:10px;}
.cs-footer__bottom p{margin:0; font-size:0.85rem; line-height:1.6; color:var(--cs-muted); max-width:900px;}
@media (max-width:900px){
  .cs-footer__grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  .cs-footer__brand{grid-column:1 / -1;}
}
@media (max-width:480px){
  .cs-footer__grid{grid-template-columns:1fr;}
}


/* ================= DROPDOWNS ================= */
.cs-dd{position:relative;}
.cs-dd__btn{display:inline-flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer; font-family:inherit; line-height:inherit;}
.cs-dd__btn svg{transition:transform .2s;}
.cs-dd__menu{
  position:absolute; top:100%; left:0; min-width:230px; padding:8px;
  background:#fff; border-radius:14px; box-shadow:0 12px 32px rgba(0,0,0,.28);
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .15s, transform .15s, visibility .15s;
}
.cs-dd__menu::before{content:""; position:absolute; left:0; right:0; top:-12px; height:12px;} /* hover bridge */
.cs-dd__link{color:#0B0F19; text-decoration:none; font-weight:700; font-size:1rem; padding:11px 14px; border-radius:10px;}
.cs-dd__link:hover,.cs-dd__link:focus-visible{background:#F2F4F7; color:#0B0F19;}
.cs-dd__link:focus-visible{outline:2px solid #B8F23A; outline-offset:0;}

@media (min-width:901px){
  .cs-dd:hover .cs-dd__menu,
  .cs-dd:focus-within .cs-dd__menu{opacity:1; visibility:visible; transform:translateY(0);}
  .cs-dd:hover .cs-dd__btn,.cs-dd:focus-within .cs-dd__btn{color:#fff; background:#161C2A;}
  .cs-dd:hover .cs-dd__btn svg,.cs-dd:focus-within .cs-dd__btn svg{transform:rotate(180deg);}
}

/* Mobile: show sub-links as a list under each group */
@media (max-width:900px){
  .cs-nav{max-height:calc(100vh - 70px); overflow-y:auto;}
  .cs-dd__btn{width:100%; justify-content:flex-start; color:#8E97AB; font-size:0.8rem; text-transform:uppercase; letter-spacing:.08em; padding:16px 12px 6px; cursor:default;}
  .cs-dd__btn svg{display:none;}
  .cs-dd__menu{position:static; opacity:1; visibility:visible; transform:none; background:transparent; box-shadow:none; padding:0; min-width:0;}
  .cs-dd__menu::before{display:none;}
  .cs-dd__link{color:#C9CFDB; padding:12px; font-size:1rem;}
  .cs-dd__link:hover{background:#161C2A; color:#fff;}
}
@media (prefers-reduced-motion:reduce){ .cs-dd__menu,.cs-dd__btn svg{transition:none;} }

/* ===== Fix: keep nav items on one line ===== */
.cs-header .cs-nav__cta{
  display:inline-flex !important; align-items:center; justify-content:center;
  white-space:nowrap !important; flex-shrink:0; line-height:1.2 !important;
  width:auto !important; word-break:normal !important;
}
.cs-header .cs-nav__link,
.cs-header .cs-dd__btn{white-space:nowrap !important; flex-shrink:0; line-height:1.2 !important;}
.cs-header .cs-logo{flex-shrink:0; white-space:nowrap;}
@media (min-width:901px) and (max-width:1100px){
  .cs-header .cs-nav__link,.cs-header .cs-dd__btn{padding:10px 8px; font-size:0.95rem;}
  .cs-header .cs-nav__cta{padding:11px 16px; font-size:0.95rem;}
}
@media (max-width:900px){
  .cs-header .cs-nav__cta{display:flex !important;}
}