/* ==========================================================================
   CHRIS ONLINE CYBER SERVICES — footer.css
   The navy bookend to the hero: same surface, same cyan accent.
   Class names unchanged. Works with or without style.css loaded first.
   ========================================================================== */

/* Tokens: keep in sync with style.css */
:root{
  --navy:#0B1220;--navy-2:#111B2E;--navy-3:#18243A;
  --navy-line:rgba(148,163,184,.2);
  --navy-line-strong:rgba(148,163,184,.4);
  --on-navy:#E6EDF6;--on-navy-2:#9FB0C6;
  --cyan:#22D3EE;--cyan-soft:#67E8F9;
  --sans:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --r-xs:6px;--r-sm:10px;--r-md:14px;--r-lg:20px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --t:180ms var(--ease);
}

/* ==========================================================================
   SHELL
   ========================================================================== */

.cx-footer{
  position:relative;
  margin-top:96px;
  padding-top:80px;
  background:var(--navy);
  color:var(--on-navy-2);
  font-family:var(--sans);
  overflow:hidden;
}

/* the animated gradient rule is gone; the colour change already marks the edge */
.cx-footer-divider{display:none}

.cx-footer :focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}

/* ==========================================================================
   CTA PANEL
   ========================================================================== */

.cx-footer-cta{
  width:min(1180px,92%);
  margin:0 auto 72px;
}

.cx-footer-cta-content{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:32px;
  padding:40px;
  background:var(--navy-2);
  border:1px solid var(--navy-line);
  border-radius:var(--r-lg);
}

.cx-footer .cx-eyebrow{color:var(--cyan)}

.cx-footer-cta h2{
  margin:.3rem 0 .5rem;
  max-width:18em;
  color:var(--on-navy);
  font-size:clamp(1.7rem,3vw,2.3rem);
  font-weight:600;
  letter-spacing:-.03em;
}

.cx-footer-cta p{
  margin:0;
  max-width:36em;
  color:var(--on-navy-2);
}

.cx-footer-cta-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* buttons: outline by default, first one is the main action.
   Selectors are deliberately specific so shared button classes can't override them. */
.cx-footer .cx-footer-cta-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 22px;
  color:var(--on-navy);
  background:transparent;
  border:1px solid var(--navy-line-strong);
  border-radius:var(--r-sm);
  font-size:.95rem;
  font-weight:600;
  line-height:1;
  transition:background var(--t),border-color var(--t),color var(--t);
}

.cx-footer .cx-footer-cta-actions a:hover{
  color:var(--on-navy);
  background:rgba(255,255,255,.07);
  border-color:var(--on-navy-2);
}

.cx-footer .cx-footer-cta-actions a:first-child{
  color:var(--navy);
  background:var(--cyan);
  border-color:var(--cyan);
}

.cx-footer .cx-footer-cta-actions a:first-child:hover{
  color:var(--navy);
  background:var(--cyan-soft);
  border-color:var(--cyan-soft);
}

/* ==========================================================================
   MAIN COLUMNS
   ========================================================================== */

.cx-footer-main{
  width:min(1180px,92%);
  margin:auto;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:48px;
  padding-bottom:60px;
}

.cx-footer h3{
  margin:0 0 14px;
  color:var(--on-navy);
  font-size:1.3rem;
  font-weight:600;
  letter-spacing:-.02em;
}

.cx-footer h4{
  margin:0 0 16px;
  color:var(--on-navy);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}

.cx-footer p,
.cx-footer li,
.cx-footer span{color:var(--on-navy-2)}

.cx-footer p{margin:0 0 1em;line-height:1.7}

.cx-footer ul{
  list-style:none;
  padding:0;
  margin:0;
}

.cx-footer ul li{margin-bottom:12px}

.cx-footer a{
  color:inherit;
  text-decoration:none;
  transition:color var(--t);
}

.cx-footer a:hover{color:var(--cyan)}

/* ==========================================================================
   LOGO
   ========================================================================== */

.cx-footer-logo{
  width:60px;
  height:60px;
  margin-bottom:16px;
  overflow:hidden;
  border-radius:var(--r-md);
  background:var(--navy-3);
  border:1px solid var(--navy-line);
}

.cx-footer-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ==========================================================================
   SOCIAL
   ========================================================================== */

.cx-socials{
  display:flex;
  gap:10px;
  margin-top:20px;
}

.cx-socials a{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--navy-line);
  border-radius:var(--r-sm);
  color:var(--on-navy);
  background:transparent;
  transition:background var(--t),border-color var(--t),color var(--t);
}

.cx-socials a:hover{
  color:var(--navy);
  background:var(--cyan);
  border-color:var(--cyan);
}

/* ==========================================================================
   HOURS
   ========================================================================== */

.cx-hours{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* ==========================================================================
   BOTTOM BAR
   ========================================================================== */

.cx-footer-bottom{
  width:min(1180px,92%);
  margin:auto;
  padding:24px 0 34px;
  border-top:1px solid var(--navy-line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  font-size:.9rem;
}

.built-by strong{color:var(--cyan);font-weight:600}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media(max-width:980px){

  .cx-footer-main{grid-template-columns:repeat(2,1fr)}

  .cx-footer-cta-content{
    flex-direction:column;
    align-items:flex-start;
    padding:32px;
  }

}

@media(max-width:640px){

  .cx-footer{margin-top:72px;padding-top:56px}

  .cx-footer-main{
    grid-template-columns:1fr;
    gap:36px;
  }

  .cx-footer-cta{margin-bottom:56px}

  .cx-footer-cta-content{padding:26px 22px}

  .cx-footer-cta-actions{width:100%}

  .cx-footer .cx-footer-cta-actions a{flex:1 1 100%}

  .cx-footer-bottom{
    flex-direction:column;
    text-align:center;
  }

}