/*
Theme Name: CRVoiceCloud
Theme URI: https://crvoicecloud.com
Author: CRVoiceCloud
Description: Custom theme for CRVoiceCloud. Software and infrastructure for contact centers. English by default, Spanish with ?lang=es.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: crvoicecloud
*/
/* Concept: the site is an annotated call transcript. Highlighter marks = emphasis,
   blue margin notes = what our software detects. Services follow the real order of a conversation. */
:root{
  --bg:#FFFFFF; --alt:#F4F5F8; --ink:#0E1116; --muted:#555D6B; --line:#DFE2E8;
  --blue:#2340E8; --hl:#FFE14D; --on-ink:#FFFFFF;
  --f-display:"Schibsted Grotesk","Segoe UI",system-ui,sans-serif;
  --f-body:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --f-mono:"DM Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1117; --alt:#151A23; --ink:#EEF1F6; --muted:#9AA3B2; --line:#262C39;
    --blue:#93A5FF; --hl:rgba(255,214,10,.32); --on-ink:#0E1117; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1117; --alt:#151A23; --ink:#EEF1F6; --muted:#9AA3B2; --line:#262C39;
  --blue:#93A5FF; --hl:rgba(255,214,10,.32); --on-ink:#0E1117; color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 18px/1.6 var(--f-body);margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
p{margin:0}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;letter-spacing:-.025em}
h1{font-weight:800;font-size:clamp(2.7rem,8.2vw,6.6rem);line-height:.98}
h2{font-weight:700;font-size:clamp(1.9rem,4vw,3rem);line-height:1.05}
h3{font-weight:700;font-size:1.2rem;letter-spacing:-.01em;line-height:1.2}
mark{color:inherit;background:linear-gradient(transparent 52%,var(--hl) 52%,var(--hl) 94%,transparent 94%);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:20px}
.mono{font:400 .8rem/1.4 var(--f-mono);letter-spacing:.02em}
.muted{color:var(--muted)}


/* header */
header.top{border-bottom:1px solid var(--line);position:sticky;top:env(safe-area-inset-top,0px);background:var(--bg);z-index:20}
.bar{display:flex;align-items:center;gap:20px;padding-block:14px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px;font:800 1.75rem/1 var(--f-display);letter-spacing:-.03em;text-decoration:none;margin-right:auto}
.logo svg{width:35px;height:30px}
nav.main{display:flex;gap:4px;overflow-x:auto;max-width:100%}
nav.main a{padding:.45rem .8rem;text-decoration:none;font-weight:500;font-size:.98rem;white-space:nowrap;border-bottom:2px solid transparent}
nav.main a:hover{border-color:var(--line)}
nav.main a[aria-current="page"]{border-color:var(--ink)}
.lang{display:flex;border:1px solid var(--line)}
.lang a{display:block;text-decoration:none;font:500 .8rem/1 var(--f-mono);padding:.5rem .65rem;background:transparent;color:var(--muted)}
.lang a[aria-current]{background:var(--ink);color:var(--on-ink)}
.portal{font-size:.92rem;font-weight:600;text-decoration:none;border:1.5px solid var(--ink);padding:.45rem .8rem}
.portal:hover{background:var(--ink);color:var(--on-ink)}
@media (max-width:760px){nav.main{order:5;width:100%}}

/* buttons */
.btn{display:inline-block;padding:.85rem 1.3rem;font:600 1rem/1 var(--f-body);text-decoration:none;border:2px solid var(--ink);cursor:pointer;background:transparent;color:var(--ink)}
.btn-fill{background:var(--ink);color:var(--on-ink)}
.btn-fill:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.btn:not(.btn-fill):hover{background:var(--alt)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* pages */

/* hero + transcript */
.hero{padding-block:clamp(36px,6vw,84px) clamp(30px,5vw,60px)}
.hero .tag{margin-bottom:22px}
.hero .lead{font-size:clamp(1.1rem,2vw,1.35rem);max-width:36em;margin-top:28px;color:var(--muted)}
.transcript{margin-top:clamp(36px,6vw,72px);border-top:2px solid var(--ink)}
.t-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:12px;color:var(--muted)}
.row{display:grid;grid-template-columns:56px 92px minmax(0,1fr) minmax(0,300px);gap:6px 18px;padding-block:16px;border-top:1px solid var(--line);align-items:start}
.row .ts{color:var(--muted)}
.row .who{font:500 .78rem/1.7 var(--f-mono);text-transform:uppercase;letter-spacing:.06em}
.row .who.sys{color:var(--blue)}
.row .say{font-size:1.18rem;line-height:1.45}
.row .say.agent{font-weight:500}
.note{font:400 .84rem/1.45 var(--f-mono);color:var(--blue);border-left:2px solid var(--blue);padding-left:10px}
.note b{font-weight:500}
.score{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;border-top:2px solid var(--ink);padding-block:16px}
.score strong{font:800 2rem/1 var(--f-display)}
.score .ck::before{content:"✓ ";color:var(--blue)}
@media (max-width:820px){
  .row{grid-template-columns:48px minmax(0,1fr)}
  .row .who{grid-column:2}.row .say{grid-column:2}.row .note{grid-column:2}
}

/* waveform + stages */
.band{padding-block:clamp(48px,7vw,96px);background:var(--alt)}
.band .head{display:grid;gap:14px;max-width:46rem;margin-bottom:34px}
.wave{width:100%;height:90px;display:block}
.wave rect{fill:var(--ink);opacity:.82;transition:fill .15s,opacity .15s}
.wave rect.hot{fill:var(--blue);opacity:1}
.stages{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:8px;border-top:2px solid var(--ink)}
.stage{padding:16px 14px 0 0;text-decoration:none;display:grid;gap:6px;align-content:start}
.stage b{font:800 1.15rem/1.1 var(--f-display);letter-spacing:-.02em}
.stage span{font-size:.92rem;color:var(--muted);line-height:1.4}
.stage:hover b,.stage:focus-visible b{color:var(--blue)}
@media (max-width:900px){.stages{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}}

/* statement */
.statement{padding-block:clamp(56px,9vw,120px)}
.statement p{font:700 clamp(1.8rem,4.6vw,3.6rem)/1.12 var(--f-display);letter-spacing:-.03em;max-width:20em;text-wrap:balance}

/* lab */
.lab{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,5vw,72px);padding-block:clamp(48px,7vw,96px);border-top:1px solid var(--line)}
.lab p{margin-top:16px}
.proto{align-self:start;border:1.5px solid var(--ink);font:400 .86rem/1.5 var(--f-mono);min-width:0}
.proto .chrome{display:flex;gap:6px;padding:10px 12px;border-bottom:1.5px solid var(--ink)}
.proto .chrome i{width:10px;height:10px;border:1.5px solid var(--ink);border-radius:50%}
.proto .body{padding:18px;display:grid;gap:10px}
.proto .ln{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--line);padding-bottom:8px}
.proto .ln em{font-style:normal;color:var(--blue)}
@media (max-width:820px){.lab{grid-template-columns:1fr}}

.closer{background:var(--ink);color:var(--on-ink);padding-block:clamp(48px,7vw,88px)}
.closer .wrap{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:end}
.closer h2{max-width:16em}
.closer .btn{border-color:var(--on-ink);color:var(--on-ink)}
.closer .btn:hover{background:var(--on-ink);color:var(--ink)}
.closer mark{background:#FFE14D;color:#0E1116;padding:0 .14em}

/* services */
.pagehead{padding-block:clamp(36px,6vw,84px) clamp(24px,4vw,48px)}
.pagehead p{margin-top:24px;max-width:36em;color:var(--muted);font-size:1.2rem}
.svc{display:grid;grid-template-columns:200px minmax(0,1fr) minmax(0,1fr);gap:18px clamp(20px,4vw,56px);padding-block:clamp(28px,4vw,52px);border-top:1px solid var(--line)}
.svc .rail{font:500 .8rem/1.4 var(--f-mono);color:var(--blue);text-transform:uppercase;letter-spacing:.08em;display:flex;gap:10px;align-items:baseline}
.svc .rail::before{content:"";width:22px;height:2px;background:var(--blue);transform:translateY(-3px)}
.svc h2{font-size:clamp(1.7rem,3vw,2.3rem)}
.svc p{margin-top:12px;color:var(--muted)}
.svc ul{margin:0;padding:0;list-style:none;display:grid;gap:0;align-self:start}
.svc li{padding:11px 0;border-bottom:1px solid var(--line)}
.svc li:first-child{border-top:1px solid var(--line)}
@media (max-width:980px){.svc{grid-template-columns:1fr}}

/* about */
.about-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,72px);padding-bottom:clamp(40px,6vw,80px)}
.prin{display:grid;gap:0}
.prin div{padding:20px 0;border-top:1px solid var(--line)}
.prin div:last-child{border-bottom:1px solid var(--line)}
.prin p{margin-top:6px;color:var(--muted)}
.print{width:100%;height:auto;display:block;border:1.5px solid var(--ink);background:var(--bg)}
@media (max-width:860px){.about-grid{grid-template-columns:1fr}}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,5vw,72px);padding-bottom:clamp(48px,7vw,96px)}
.facts{display:grid;gap:0;margin-top:30px}
.fact{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.fact:last-child{border-bottom:1px solid var(--line)}
.fact dt{color:var(--muted);font:400 .8rem/1.6 var(--f-mono);text-transform:uppercase;letter-spacing:.06em}
.fact dd{margin:0;font-weight:600;overflow-wrap:anywhere}
form{display:grid;gap:18px}
label{display:grid;gap:6px;font-weight:600;font-size:.95rem}
input,select,textarea{font:inherit;color:var(--ink);background:var(--bg);border:1.5px solid var(--ink);border-radius:0;padding:.75rem .85rem;width:100%}
input:focus,select:focus,textarea:focus{outline:3px solid var(--blue);outline-offset:0}
textarea{min-height:140px;resize:vertical}
#sent{font:400 .85rem/1.4 var(--f-mono);color:var(--blue)}
@media (max-width:860px){.contact{grid-template-columns:1fr}}

footer{border-top:2px solid var(--ink);padding-block:34px;font-size:.95rem}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
footer .cols div{display:grid;gap:4px;align-content:start}
footer small{font:400 .75rem/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.wave rect{transition:none}}

/* ---- WordPress additions ---- */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--on-ink);padding:10px 14px;z-index:100}
.skip:focus{left:8px;top:8px}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.prose{padding-block:clamp(32px,5vw,72px);max-width:820px}
.prose h1{font-size:clamp(2rem,5vw,3.4rem);margin-bottom:28px}
.prose h2{font-size:clamp(1.5rem,3vw,2rem);margin:40px 0 12px}
.prose h3{margin:28px 0 8px}
.prose p,.prose ul,.prose ol{margin:0 0 1.1em}
.prose a{color:var(--blue)}
.prose img{max-width:100%;height:auto}
.prose .meta{color:var(--muted);font:400 .85rem/1.4 var(--f-mono);margin-bottom:24px}
.posts{display:grid;gap:0}
.posts article{padding:22px 0;border-top:1px solid var(--line)}
.posts article h2{font-size:1.4rem;margin:0 0 6px}
.posts article h2 a{text-decoration:none}
.posts article h2 a:hover{color:var(--blue)}
.pager{display:flex;justify-content:space-between;gap:16px;margin-top:28px}
.wpcf7 form{display:grid;gap:16px}
.wpcf7 input[type=submit]{display:inline-block;padding:.85rem 1.3rem;font:600 1rem/1 var(--f-body);border:2px solid var(--ink);background:var(--ink);color:var(--on-ink);cursor:pointer;width:auto}
.wpcf7 input[type=submit]:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.wpcf7-not-valid-tip,.wpcf7-response-output{font:400 .85rem/1.4 var(--f-mono);color:var(--blue)}
.wpcf7 canvas{max-width:100%;border:1.5px solid var(--ink);background:#fff}
#sent,.form-note{font:400 .85rem/1.4 var(--f-mono);color:var(--blue)}
.form-note.err{color:#B3261E}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .form-note.err{color:#FF8A80}}