/* ==========================================================================
   Unicomms Networks Ltd — "BackBox-style" Redesign
   Bold enterprise-SaaS look: diagonal texture hero, sharper cards, stronger CTAs.
   Uses ONLY sections that already exist on your site (no new blocks required).
   Paste into: Appearance → Editor → Styles → Additional CSS
   ========================================================================== */

:root{
  --uc-navy:      #0a1a2f;
  --uc-navy-2:    #0f2540;
  --uc-navy-3:    #132d4d;
  --uc-teal:      #00c2b3;
  --uc-teal-dark: #009d91;
  --uc-cyan:      #2fd6ff;
  --uc-orange:    #ff7a3d;   /* used sparingly, as a "signal" accent like BackBox's punchy CTA color */
  --uc-ink:       #eaf6f8;
  --uc-muted:     #9fb3c8;
  --uc-radius:    14px;
  --uc-shadow:    0 14px 34px rgba(4, 20, 40, 0.16);
  --uc-shadow-lg: 0 24px 60px rgba(4, 20, 40, 0.24);
}

body{
  background: #f5f8fa;
  color: #17232f;
}

.wp-block-heading{
  letter-spacing: -0.015em;
  color: var(--uc-navy);
}

/* ---------------------------------------------------------------------
   HEADER — sharper, sticks with a hard shadow line (BackBox-style,
   not a soft blur) once scrolled
   --------------------------------------------------------------------- */
header.wp-block-group,
.wp-block-template-part.header{
  transition: box-shadow .3s ease, background-color .3s ease;
}

.uc-scrolled header,
.uc-scrolled .wp-block-template-part.header{
  background-color: #ffffff !important;
  box-shadow: 0 2px 0 var(--uc-teal), 0 10px 24px rgba(4,20,40,0.14);
}

.wp-block-navigation-item a{
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.86rem;
  letter-spacing: 0.03em;
}

.wp-block-navigation-item a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:3px;
  background: var(--uc-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.wp-block-navigation-item{ position: relative; }
.wp-block-navigation-item a:hover::after{ transform: scaleX(1); }

/* ---------------------------------------------------------------------
   HERO — dark navy with a diagonal "slash" texture in the background,
   echoing BackBox's angular graphic panels
   --------------------------------------------------------------------- */
.wp-block-group:has(h1){
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--uc-navy) 0%, var(--uc-navy-2) 55%, var(--uc-navy-3) 100%);
  color: var(--uc-ink) !important;
  padding-block: clamp(3.5rem, 9vw, 7rem);
  isolation: isolate;
}

/* diagonal slash panels */
.wp-block-group:has(h1)::before,
.wp-block-group:has(h1)::after{
  content:"";
  position:absolute;
  top:-20%;
  width: 45%;
  height: 160%;
  background: linear-gradient(180deg, rgba(0,194,179,0.16), rgba(47,214,255,0.05));
  transform: skewX(-14deg);
  z-index: 0;
}
.wp-block-group:has(h1)::before{ right: 6%; }
.wp-block-group:has(h1)::after{
  right: -6%;
  width: 18%;
  background: linear-gradient(180deg, rgba(255,122,61,0.14), transparent);
}

.wp-block-group:has(h1) > *{
  position: relative;
  z-index: 1;
}

.wp-block-group:has(h1) h1,
.wp-block-group:has(h1) .wp-block-heading{
  color: #ffffff !important;
  font-size: clamp(2.3rem, 5.4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.08;
  max-width: 18ch;
}

.wp-block-group:has(h1) p{
  color: var(--uc-muted) !important;
  font-size: clamp(1rem, 2vw, 1.2rem);
  max-width: 52ch;
}

.wp-block-group:has(h1) h1::after{
  content:"";
  display:block;
  width: 90px;
  height: 5px;
  margin-top: 16px;
  background: linear-gradient(90deg, var(--uc-orange), var(--uc-teal));
}

/* ---------------------------------------------------------------------
   BUTTONS — bolder, squared-ish corners, arrow-shift on hover
   (BackBox uses punchy rectangular CTAs rather than pills)
   --------------------------------------------------------------------- */
.wp-block-button__link{
  border-radius: 6px !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  padding: 1em 2.1em !important;
  background: var(--uc-orange) !important;
  border: none !important;
  box-shadow: 0 10px 24px rgba(255,122,61,0.35);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  position: relative;
}

.wp-block-button__link::after{
  content: "→";
  margin-left: 0.6em;
  display: inline-block;
  transition: transform .2s ease;
}

.wp-block-button__link:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(255,122,61,0.45);
  filter: brightness(1.04);
}
.wp-block-button__link:hover::after{ transform: translateX(4px); }

.wp-block-button.is-style-outline .wp-block-button__link{
  background: transparent !important;
  color: #ffffff !important;
  border: 2px solid var(--uc-teal) !important;
  box-shadow: none;
}

/* ---------------------------------------------------------------------
   SECTION HEADINGS
   --------------------------------------------------------------------- */
h2.wp-block-heading{
  font-size: clamp(1.7rem, 3.3vw, 2.5rem);
  font-weight: 800;
  text-align: center;
  margin-bottom: 0.35em;
}

h2.wp-block-heading::after{
  content:"";
  display:block;
  width: 56px;
  height: 4px;
  margin: 14px auto 0;
  background: var(--uc-orange);
}

/* ---------------------------------------------------------------------
   SERVICES GRID — sharper cards, colored top-edge, icon-badge circle
   feel (BackBox uses solid-color icon badges above each card title)
   --------------------------------------------------------------------- */
.wp-block-columns{ gap: 1.5rem !important; }

.wp-block-column{
  background: #ffffff;
  border-radius: var(--uc-radius);
  padding: 2rem 1.7rem !important;
  box-shadow: var(--uc-shadow);
  border: 1px solid rgba(10,26,47,0.06);
  border-top: 4px solid transparent;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  position: relative;
}

.wp-block-column:hover{
  transform: translateY(-6px);
  box-shadow: var(--uc-shadow-lg);
  border-top-color: var(--uc-teal);
}

.wp-block-column h3,
.wp-block-column .wp-block-heading{
  color: var(--uc-navy);
  font-size: 1.15rem;
  font-weight: 800;
}

/* small icon-badge placeholder using the first letter of the heading,
   drawn purely in CSS — no new image blocks required */
.wp-block-column h3::before,
.wp-block-column .wp-block-heading::before{
  content: attr(data-uc-badge);
}

/* reveal-on-scroll, toggled by JS */
.uc-reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s ease, transform .55s ease;
}
.uc-reveal.uc-in-view{ opacity: 1; transform: translateY(0); }

/* ---------------------------------------------------------------------
   "Smart Office in a Box" feature strip — turn the four short lines
   into pill-style chips like BackBox's feature-tag rows
   --------------------------------------------------------------------- */
.wp-block-group p:only-child{
  display: inline-block;
  background: #eef7f6;
  color: var(--uc-navy);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.55em 1.1em;
  border-radius: 999px;
  border: 1px solid rgba(0,194,179,0.25);
  margin: 0.3em 0.4em 0.3em 0;
}

/* ---------------------------------------------------------------------
   CONTACT — dark card echoing BackBox's closing CTA banner
   --------------------------------------------------------------------- */
.wp-block-group:has(a[href^="mailto:"]){
  background: linear-gradient(135deg, var(--uc-navy) 0%, var(--uc-navy-2) 100%);
  color: var(--uc-ink) !important;
  border-radius: var(--uc-radius);
  padding: clamp(2.2rem, 5vw, 3.8rem);
  text-align: center;
  box-shadow: var(--uc-shadow-lg);
}

.wp-block-group:has(a[href^="mailto:"]) h2{
  color: #ffffff !important;
}
.wp-block-group:has(a[href^="mailto:"]) h2::after{
  margin-inline: auto;
}

.wp-block-group:has(a[href^="mailto:"]) p{
  color: var(--uc-muted) !important;
}

a[href^="mailto:"],
a[href^="tel:"]{
  font-weight: 700;
  color: var(--uc-cyan);
}
a[href^="mailto:"]:hover,
a[href^="tel:"]:hover{ color: var(--uc-orange); }

/* ---------------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------------- */
footer,
.wp-block-template-part.footer{
  background: var(--uc-navy) !important;
  color: var(--uc-muted) !important;
  border-top: 3px solid var(--uc-orange);
}

footer a,
.wp-block-template-part.footer a{
  color: #ffffff !important;
  opacity: .85;
}
footer a:hover,
.wp-block-template-part.footer a:hover{
  opacity: 1;
  color: var(--uc-teal) !important;
}

/* ---------------------------------------------------------------------
   BACK-TO-TOP (injected by JS)
   --------------------------------------------------------------------- */
.uc-back-to-top{
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  border: none;
  background: var(--uc-orange);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(255,122,61,0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
  z-index: 9999;
}
.uc-back-to-top.uc-visible{ opacity: 1; visibility: visible; transform: translateY(0); }
.uc-back-to-top:hover{ filter: brightness(1.06); }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 782px){
  .wp-block-group:has(h1)::before,
  .wp-block-group:has(h1)::after{ display: none; } /* skip skew panels on small screens */
  .wp-block-column{ padding: 1.6rem 1.4rem !important; }
  .uc-back-to-top{ right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce){
  .uc-reveal, .wp-block-column, .wp-block-button__link, a, header{
    transition: none !important;
  }
  .uc-reveal{ opacity: 1; transform: none; }
}