/*
Theme Name:  teqniq Mission Control
Theme URI:   https://teqniq.co.uk
Author:      teqniq
Description: The Mission Control design for teqniq — a generalist recruitment agency. Hand-built classic theme: no page builder, no slider framework, no options framework. Single dark theme. Colour has one job — white and grey are the page, blue means live.
Version:     0.7.1
Requires at least: 6.0
Requires PHP: 8.0
License:     GPL-2.0-or-later
Text Domain: teqniq
*/

/* ============================================================
   CORE — every page loads this and nothing else by default.
   Page-specific CSS lives in assets/css/<page>.css and is
   enqueued only where it is needed.
   ============================================================ */

:root{
  --void:      #050607;   /* near-black, neutral */
  --deck:      #0B0C0E;   /* panel ground */
  --steel:     #15161A;   /* raised surface */
  --hair:      rgba(237,237,238,0.13);
  --hair-soft: rgba(237,237,238,0.06);
  --ice:       #EDEDEE;   /* primary text */
  --slate:     #96979A;   /* secondary text */
  --dim:       #7C7E82;   /* labels — kept above 4.5:1 on --void */
  --signal:    #FFFFFF;   /* the logo's white */
  --grey:      #8F8F8F;   /* the logo's grey */
  --bad:       #E4796B;   /* form errors only */
  --live:      #3D82E8;   /* BLUE MEANS LIVE — nothing decorative */
  --live-dim:  rgba(61,130,232,0.22);

  --gut:  clamp(1.35rem, 5vw, 5.5rem);
  --rule: 1px solid var(--hair);
  --ease: cubic-bezier(.22,.72,.24,1);
  --pop:  cubic-bezier(.21,1.12,.4,1);   /* lands past full size, then settles */
}

*,*::before,*::after{ box-sizing:border-box; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
section[id], header[id], footer[id]{ scroll-margin-top:72px; }

body{
  margin:0;
  background:var(--void);
  color:var(--ice);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--live); outline-offset:3px; }

/* ---------- scroll reveal ----------
   Content punches in: undersized and slightly low, then up to full size with
   a small overshoot so it arrives rather than fades. Origin is the left edge,
   so left-aligned type grows outward without the block sliding sideways. */
[data-rv] .rv{
  opacity:0; transform:translateY(16px) scale(0.86); transform-origin:left center;
  transition:opacity .5s ease var(--rv-d,0s), transform .8s var(--pop) var(--rv-d,0s);
}
[data-rv].rv-in .rv{ opacity:1; transform:none; }
[data-rv] .rv-wipe{
  opacity:0; clip-path:inset(0 0 106% 0); transform:scale(0.93); transform-origin:left center;
  transition:opacity .4s linear var(--rv-d,0s),
             clip-path 1s cubic-bezier(.2,.76,.2,1) var(--rv-d,0s),
             transform .9s var(--pop) var(--rv-d,0s);
}
[data-rv].rv-in .rv-wipe{ opacity:1; clip-path:inset(-14% 0 -14% 0); transform:none; }
.is-centred .rv, .is-centred .rv-wipe{ transform-origin:center; }

/* ---------- type roles ---------- */
.mc-nav a, .mc-btn, .mc-section-label{
  font-family:"Barlow Condensed","Oswald",Impact,sans-serif;
  text-transform:uppercase; font-weight:400;
}
.mc-mono{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:0.66rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--dim); font-weight:500;
}

/* Every section label carries the same live pulse, so the blue reads as one
   signal running the length of the site. */
.mc-section-label{
  display:flex; align-items:center; gap:0.85rem;
  font-size:0.78rem; letter-spacing:0.42em; color:var(--slate);
}
.mc-section-label::before{
  content:""; flex:none; width:7px; height:7px; border-radius:50%;
  background:var(--live); box-shadow:0 0 0 4px var(--live-dim);
  animation:blip 2.6s ease-in-out infinite;
}
.is-centred .mc-section-label{ justify-content:center; }
@keyframes blip{ 0%,100%{opacity:1} 50%{opacity:.28} }

/* ---------- brand lockup ---------- */
.tq-logo{
  --tq-h:20px;
  display:inline-flex; align-items:center; gap:calc(var(--tq-h)*0.45);
  color:#fff; text-decoration:none; flex:none;
}
.tq-trace{ height:calc(var(--tq-h)*1.15); width:calc(var(--tq-h)*1.15*1.733); flex:none; overflow:visible; }
.tq-trace .track{ fill:none; stroke:currentColor; stroke-width:4; opacity:.2; }
.tq-trace .tail,
.tq-trace .head{ fill:none; stroke:currentColor; stroke-linecap:butt; animation:tq-sweep 3s linear infinite; }
.tq-trace .tail{ stroke-width:7; opacity:.35; stroke-dasharray:16 100; }
.tq-trace .head{ stroke-width:9; stroke-dasharray:5 111; animation-delay:.09s; }
.tq-word{ height:var(--tq-h); width:calc(var(--tq-h)*3.74); display:block; }
@keyframes tq-sweep{ to{ stroke-dashoffset:-116; } }
.mc-foot .tq-logo{ --tq-h:25px; }
@media (max-width:600px){ .tq-logo{ --tq-h:18px; } }

/* ---------- nav ----------
   On the front page the bar sits over the hero and fades in as the page
   moves. Everywhere else it is solid from the start, because there is no
   hero behind it to show through. */
.mc-nav{
  position:fixed; inset:0 0 auto 0; z-index:80;
  display:flex; align-items:center; gap:2rem;
  padding:1.1rem var(--gut);
  background:rgba(5,6,7,0.92);
  backdrop-filter:blur(3px);
  border-bottom:var(--rule);
  transition:background .4s ease, border-color .4s ease;
}
.home .mc-nav{
  background:linear-gradient(180deg, rgba(5,6,7,0.94) 0%, rgba(5,6,7,0.72) 55%, rgba(5,6,7,0) 100%);
  border-bottom-color:transparent;
}
.home.is-scrolled .mc-nav{ background:rgba(5,6,7,0.92); border-bottom-color:var(--hair); }

.mc-nav ul{ list-style:none; margin:0 0 0 auto; padding:0; display:flex; gap:1.9rem; }
.mc-nav li{ margin:0; }
.mc-nav a{
  font-size:0.86rem; letter-spacing:0.2em; color:var(--ice); opacity:.72;
  transition:opacity .18s ease; padding-block:0.35rem; position:relative;
}
.mc-nav a:hover{ opacity:1; }
/* The logo is a link inside the nav, so the dimmed link state above applied
   to it too — it read duller than the footer lockup until hovered. The brand
   mark is not a navigation item: full strength, always. */
.mc-nav .tq-logo{ opacity:1; }
.mc-nav .current-menu-item > a,
.mc-nav a[aria-current="page"]{ opacity:1; }
.mc-nav .current-menu-item > a::after,
.mc-nav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--signal);
}

.mc-btn{
  display:inline-flex; align-items:center; gap:0.7rem;
  border:1px solid var(--ice); background:transparent; color:var(--ice);
  padding:0.62rem 1.5rem; font-size:0.84rem; letter-spacing:0.22em; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.mc-btn:hover{ background:var(--ice); color:var(--void); }
.mc-btn--ghost{ border-color:var(--hair); color:var(--slate); }
.mc-btn--ghost:hover{ border-color:var(--live); background:transparent; color:var(--live); }
.mc-btn--sm{ padding:0.5rem 1.1rem; font-size:0.76rem; }

/* Header phone — the fastest route from landing to a consultant. Below 860px
   the number drops away and the handset alone stays tappable. */
.mc-tel{
  display:inline-flex; align-items:center; gap:0.55rem;
  font-family:"Barlow Condensed","Oswald",sans-serif;
  font-size:0.92rem; letter-spacing:0.12em; font-variant-numeric:tabular-nums;
  color:var(--ice); opacity:0.72; flex:none;
  transition:opacity .18s ease; padding-block:0.35rem;
}
.mc-tel:hover{ opacity:1; }
.mc-tel svg{ width:14px; height:14px; flex:none; }
@media (max-width:860px){
  .mc-tel .num{ display:none; }
  .mc-tel{ min-width:44px; min-height:44px; justify-content:center; padding:0; }
  .mc-tel svg{ width:17px; height:17px; }
}
@media (max-width:1024px){
  .mc-nav{ gap:1.4rem; } .mc-nav ul{ gap:1.3rem; }
  .mc-nav a{ font-size:0.8rem; letter-spacing:0.15em; }
}
@media (max-width:720px){
  .mc-nav ul{ display:none; }
  .mc-tel{ margin-left:auto; }
  .mc-nav .mc-btn{ margin-left:0; }
}

/* ---------- shared page furniture ---------- */
.mc-wrap{ max-width:1440px; margin-inline:auto; }

/* ---------- footer ---------- */
.mc-foot{ border-top:var(--rule); padding:3.2rem var(--gut) 2rem; background:var(--deck); }
.mc-foot-grid{ display:grid; gap:2.4rem; grid-template-columns:1fr; max-width:1440px; margin-inline:auto; }
@media (min-width:820px){ .mc-foot-grid{ grid-template-columns:1.4fr repeat(3,1fr); } }
.mc-foot h4{
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.28em;
  font-size:0.72rem; color:var(--dim); font-weight:500; margin:0 0 1.1rem;
}
.mc-foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.6rem; }
.mc-foot li{ margin:0; }
.mc-foot a{ color:var(--slate); font-size:0.9rem; font-weight:300; }
.mc-foot a:hover{ color:var(--ice); }
.mc-foot li > span{ color:var(--slate); font-size:0.9rem; font-weight:300; }
.mc-foot .blurb{ color:var(--slate); font-size:0.9rem; font-weight:300; max-width:38ch; margin:1.2rem 0 0; }
.mc-foot .hours{ color:var(--slate); font-size:0.9rem; font-weight:300; }
.mc-legal{
  max-width:1440px; margin:3rem auto 0; padding-top:1.4rem; border-top:var(--rule);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
}
.mc-legal p{ margin:0; }

/* ---------- WordPress needs these ---------- */
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.skip-link:focus{
  position:fixed; top:0.6rem; left:0.6rem; z-index:200;
  background:var(--ice); color:var(--void); padding:0.6rem 1rem;
  clip-path:none; width:auto; height:auto;
}
.alignwide{ max-width:1200px; margin-inline:auto; }
.alignfull{ max-width:none; }

/* ---------- reduced motion: everything present, nothing moving ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; transition-delay:0s !important;
  }
  .tq-trace .tail{ display:none; }
  .tq-trace .head{ stroke-width:7; animation:none; stroke-dasharray:none; opacity:1; }
  .tq-trace .track{ display:none; }
  [data-rv] .rv, [data-rv] .rv-wipe{ opacity:1; transform:none !important; clip-path:none; }
}

/* ---------- page-top pulse, shared by every page ----------
   The home hero's waveform. Inner pages centre it behind the heading. */
.mc-trace{ position:absolute; left:0; right:0; top:40%; z-index:-1; width:100%; height:auto; pointer-events:none; }
.mc-trace path{ fill:none; stroke-linejoin:miter; stroke-linecap:butt; }
.mc-trace .track{ stroke:#8F8F8F; stroke-width:2; opacity:0.22; stroke-dasharray:100; stroke-dashoffset:100; animation:tq-draw 3.2s cubic-bezier(.22,.7,.3,1) .35s forwards; }
.mc-trace .tail, .mc-trace .head{ stroke:#FFFFFF; }
.mc-trace .tail{ stroke-width:3.5; stroke-dasharray:8 142; animation:tq-hero-sweep 7s linear 3.1s infinite, tq-hero-tail .9s ease 3.1s both; }
.mc-trace .head{ stroke-width:4.5; stroke-dasharray:2.5 147.5; animation:tq-hero-sweep 7s linear 3.31s infinite, tq-hero-head .9s ease 3.31s both; }
@keyframes tq-draw{ to{ stroke-dashoffset:0; } }
@keyframes tq-hero-sweep{ from{ stroke-dashoffset:0; } to{ stroke-dashoffset:-150; } }
@keyframes tq-hero-tail{ from{ opacity:0; } to{ opacity:0.30; } }
@keyframes tq-hero-head{ from{ opacity:0; } to{ opacity:0.85; } }
.mc-pagehead .mc-trace{ top:50%; transform:translateY(-50%); }
@media (prefers-reduced-motion:reduce){ .mc-trace .track{ stroke-dashoffset:0; opacity:0.35; } .mc-trace .tail, .mc-trace .head{ display:none; } }

/* ---------- Turnstile ----------
   A defensive reset only: Cloudflare already clears the iframe element's
   border, but Chrome's UA sheet would otherwise paint `2px inset` in
   currentColor — near-white on our ground. The frame you can see around the
   widget is drawn *inside* the iframe and is not reachable from here; it is
   dealt with by data-appearance in functions.php. */
.wpcf7-turnstile iframe{ border:0; }