/* Pagina de Contact, refăcută.
   Aceleași culori ca pe restul site-ului: violet #6239BD, turcoaz #74C5DA,
   teal închis #092933. Benzile alternează violet - alb - violet, ca pe
   Colocare și Externalizare IT.
   Totul e închis sub .rdn-contact, ca să nu atingă alte pagini.
   Scris de scripts/contact.py. */

.rdn-contact{
  --rc-violet:#6239BD;
  --rc-violet-banda:#5b32b8;
  --rc-cyan:#74C5DA;
  --rc-cyan-clar:#a6e4f2;
  --rc-adanc:#092933;
  --rc-grad-text:linear-gradient(100deg,#6239BD 10%,#7d57d8 45%,#4fa8c4 92%);
  --rc-arc:cubic-bezier(.22,.61,.36,1);
  font-family:'Open Sans',Arial,sans-serif;
  font-size:15px; line-height:1.65; color:#6b7385;
}
.rdn-contact *{box-sizing:border-box}
.rdn-contact h1,.rdn-contact h2,.rdn-contact h3{
  font-family:Teko,'Open Sans',sans-serif; font-weight:400; line-height:1.05;
  letter-spacing:-.01em; margin:0;
  /* regula de gradient a temei prinde h1 și h2 din .post-content; aici
     culoarea o dăm noi, pe fiecare bandă */
  background:none; -webkit-text-fill-color:currentColor;
}
.rdn-contact h1::after,.rdn-contact h2::after{display:none}
.rdn-contact p{margin:0}
.rdn-contact a{text-decoration:none}

/* conținutul paginii stă într-un jgheab de 1380px; benzile trebuie să iasă
   din el, ca pe Colocare și Externalizare IT */
.rc-cap,.rc-alb,.rc-mov{width:100vw; margin-left:calc(50% - 50vw); max-width:100vw}
.rc-in{max-width:1216px; margin:0 auto; padding:0 24px}

/* eticheta cu liniuțe, ca pe restul site-ului */
.rc-et{display:flex; align-items:center; gap:12px; margin:0 0 16px;
  font-size:12px; font-weight:700; letter-spacing:3px; text-transform:uppercase;
  color:var(--rc-cyan-clar)}
.rc-et::before,.rc-et::after{content:""; width:38px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,rgba(116,197,218,0),var(--rc-cyan))}
.rc-et::after{background:linear-gradient(90deg,var(--rc-cyan),rgba(116,197,218,0))}
.rc-et.rc-centrat{justify-content:center}
.rc-et.rc-et-violet{color:var(--rc-violet)}
.rc-et.rc-et-violet::before{background:linear-gradient(90deg,rgba(98,57,189,0),var(--rc-violet))}
.rc-et.rc-et-violet::after{background:linear-gradient(90deg,var(--rc-violet),rgba(98,57,189,0))}

/* --- 1. capul paginii ------------------------------------------------- */
.rc-cap{position:relative; overflow:hidden; color:#fff; padding:96px 0 84px;
  background-color:var(--rc-violet-banda);
  /* poza are filigranul „RDN Network Data" în ultimii 12% de jos, de-aia o
     urcăm puțin: marginea benzii îl taie */
  background-image:url("/wp-content/uploads/2024/02/Contact.webp");
  background-position:center top; background-size:auto 122%; background-repeat:no-repeat}
.rc-cap::before{content:""; position:absolute; inset:0;
  background:linear-gradient(104deg,rgba(61,31,134,.94) 0%,rgba(91,50,184,.88) 48%,rgba(9,41,51,.78) 100%)}
.rc-cap .rc-in{position:relative; z-index:1}
.rc-cap h1{font-size:82px; margin:0 0 14px; max-width:16ch; color:#fff}
.rc-cap h1 span{color:var(--rc-cyan-clar)}
.rc-sub{font-size:17px; color:rgba(255,255,255,.84); max-width:52ch; margin:0 0 38px}

.rc-actiuni{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:900px}
.rc-act{display:flex; align-items:center; gap:15px; padding:18px 20px; border-radius:16px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:transform .3s var(--rc-arc),background .3s var(--rc-arc)}
.rc-act:hover{transform:translateY(-3px); background:rgba(255,255,255,.17)}
.rc-ic{flex:0 0 46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:rgba(116,197,218,.20); border:1px solid rgba(166,228,242,.45)}
.rc-ic svg{width:21px; height:21px; fill:none; stroke:var(--rc-cyan-clar); stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round}
.rc-act-text b{display:block; font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:var(--rc-cyan-clar); font-weight:700; margin-bottom:2px}
.rc-act-text i{font-style:normal; font-size:17px; color:#fff; font-weight:600; white-space:nowrap}

.rc-program{display:inline-flex; align-items:center; gap:10px; margin-top:30px;
  padding:9px 18px; border-radius:99px; background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.18); font-size:13px; color:rgba(255,255,255,.88)}
.rc-punct{width:8px; height:8px; border-radius:50%; background:#5ad18b;
  box-shadow:0 0 0 4px rgba(90,209,139,.22); flex:0 0 8px}

/* --- 2. banda albă: formularul și panourile --------------------------- */
.rc-alb{padding:86px 0; background:#fff}
.rc-doua{display:grid; grid-template-columns:1.35fr 1fr; gap:46px 40px; align-items:start}
.rc-formular{grid-row:span 2}
.rc-doua h2{font-size:56px; color:transparent;
  background:var(--rc-grad-text); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; margin:0 0 10px}
.rc-intro{margin:0 0 26px; max-width:46ch}

/* pastilele cu subiectul: pun subiectul în mesaj, fiindcă formularul are
   aceleași câmpuri ca până acum */
.rc-subiecte{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:26px}
/* futurist.css dă fiecărui <button> de pe site degradeul violet, cu
   „!important". Pastilele nu sunt butoane de acțiune, ci niște comutatoare,
   deci aici îi ținem piept cu aceleași arme. */
.rdn-contact .rc-subiecte button{padding:8px 15px; font-size:13px; font-weight:600;
  font-family:inherit; cursor:pointer; transition:all .25s var(--rc-arc);
  border:1.5px solid #e3e7ef !important;
  border-radius:99px !important;
  background:#fff !important;
  color:#7b8498 !important;
  box-shadow:none}
.rdn-contact .rc-subiecte button:hover{border-color:#c9cfdd !important;
  color:var(--rc-adanc) !important}
.rdn-contact .rc-subiecte button.rc-ales{background:var(--rc-violet) !important;
  border-color:var(--rc-violet) !important; color:#fff !important;
  box-shadow:0 8px 20px -8px rgba(98,57,189,.6)}

/* formularul: marcajul rămâne al Contact Form 7, se schimbă doar înfățișarea */
.rdn-contact #contact-formular{display:flex; flex-wrap:wrap; gap:0 16px}
.rdn-contact #contact-formular > div{width:100%}
/* numele și e-mailul stau alături; telefonul și mesajul pe toată lățimea */
.rdn-contact #contact-formular > .name-box,
.rdn-contact #contact-formular > .name-box + .email-box{width:calc(50% - 8px)}
.rdn-contact #contact-formular p{margin:0 0 16px}
.rdn-contact #contact-formular label{display:block; font-size:12px; font-weight:700;
  letter-spacing:1.6px; text-transform:uppercase; color:#8a93a6; margin-bottom:7px}
.rdn-contact .wpcf7-form-control-wrap{display:block}
.rdn-contact input.wpcf7-text,
.rdn-contact textarea.wpcf7-textarea{width:100%; font-family:inherit; font-size:15px;
  color:var(--rc-adanc); padding:14px 16px; border:1.5px solid #e3e7ef; border-radius:13px;
  background:#fbfcfe; transition:border-color .25s var(--rc-arc),box-shadow .25s var(--rc-arc)}
.rdn-contact input.wpcf7-text:focus,
.rdn-contact textarea.wpcf7-textarea:focus{outline:none; border-color:var(--rc-violet);
  box-shadow:0 0 0 4px rgba(98,57,189,.10); background:#fff}
.rdn-contact textarea.wpcf7-textarea{min-height:128px; resize:vertical}
/* butonul de trimitere îl lăsăm cum arată butoanele de pe tot site-ul —
   culoarea și rotunjirea vin din futurist.css. Aici doar îl facem mai mare. */
.rdn-contact input.wpcf7-submit{cursor:pointer; font-family:inherit; font-size:14px;
  font-weight:700; letter-spacing:1.4px; text-transform:uppercase; padding:16px 34px}
/* învelișurile din șablon nu mai au ce face aici */
.rdn-contact .clapat-button-wrap,.rdn-contact .clapat-button,
.rdn-contact .button-border{display:inline-block; border:0; padding:0; margin:0}
/* caseta în care Contact Form 7 scrie răspunsul: cât timp formularul e
   neatins („init"), n-are ce arăta, deci nu se vede */
.rdn-contact form.wpcf7-form.init .wpcf7-response-output{display:none}
.rc-marunt{margin-top:14px; font-size:12.5px; color:#9aa2b3}

.rc-panou{border-radius:22px; padding:34px 30px; background:#f7f8fc;
  border:1px solid #eceff7; box-shadow:0 18px 44px -28px rgba(9,41,51,.28)}
.rc-panou h2{font-size:34px; color:var(--rc-adanc); margin:0 0 20px;
  background:none; -webkit-text-fill-color:currentColor}
.rc-pas{display:flex; gap:15px; margin-bottom:20px}
.rc-nr{flex:0 0 32px; height:32px; border-radius:50%; display:grid; place-items:center;
  font-family:Teko,'Open Sans',sans-serif; font-size:19px; color:#fff;
  background:linear-gradient(135deg,var(--rc-violet),#8b63e8);
  box-shadow:0 6px 14px -6px rgba(98,57,189,.7)}
.rc-pas p{font-size:14px; line-height:1.6}
.rc-pas p b{color:var(--rc-adanc)}
.rc-raspuns{margin-top:26px; padding-top:22px; border-top:1px dashed #dfe4ef;
  display:flex; align-items:center; gap:12px; font-size:13.5px; color:#7b8498}

.rc-sunet{margin-top:20px; text-align:center; border-color:transparent;
  background:linear-gradient(150deg,#6239BD 0%,#5b32b8 55%,#3d1f86 100%);
  box-shadow:0 18px 44px -20px rgba(98,57,189,.75)}
.rc-tip-mic{font-size:11px; font-weight:700; letter-spacing:2.4px; text-transform:uppercase;
  color:var(--rc-cyan-clar); margin-bottom:8px}
.rc-numar{display:block; font-family:Teko,'Open Sans',sans-serif; font-size:44px; color:#fff;
  letter-spacing:-.01em; line-height:1.1}
.rc-orar{font-size:13px; color:rgba(255,255,255,.72); margin:4px 0 18px}
.rc-wa{display:inline-flex; align-items:center; gap:9px; padding:12px 22px; border-radius:99px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.26);
  font-size:13.5px; font-weight:700; color:#fff;
  transition:background .25s var(--rc-arc)}
.rc-wa:hover{background:rgba(255,255,255,.24)}
.rc-wa svg{width:17px; height:17px; fill:none; stroke:var(--rc-cyan-clar); stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round}

/* --- 3. banda violet: sediile ----------------------------------------- */
.rc-mov{position:relative; overflow:hidden; padding:86px 0;
  color:rgba(255,255,255,.82); background-color:var(--rc-violet-banda);
  background-image:radial-gradient(120% 90% at 8% 0%,rgba(124,79,224,.95) 0%,rgba(91,50,184,.92) 42%,rgba(61,31,134,.98) 100%)}
/* aceeași textură discretă ca pe prima pagină */
.rc-mov::before{content:""; position:absolute; inset:0;
  background:url("/wp-content/uploads/2016/11/avada-it-section-bg.webp") center/cover no-repeat;
  opacity:.08; mix-blend-mode:overlay; pointer-events:none}
.rc-mov .rc-in{position:relative; z-index:1}
.rc-mov h2{font-size:56px; color:#fff; text-align:center; margin:0 0 10px}
.rc-centrat-text{text-align:center; margin:0 auto 44px; max-width:56ch}

.rc-sedii{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.rc-sediu{border-radius:20px; overflow:hidden; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:flex; flex-direction:column;
  transition:transform .3s var(--rc-arc),background .3s var(--rc-arc)}
.rc-sediu:hover{transform:translateY(-4px); background:rgba(255,255,255,.13)}
/* harta fiecărui sediu, cu aceeași cheie Google ca până acum */
.rc-harta{line-height:0; background:#e8edf3}
.rc-harta iframe{width:100%; height:190px; border:0; display:block}
.rc-sediu-text{padding:24px 26px 26px; display:flex; flex-direction:column; flex:1}
.rc-tip{font-size:11px; font-weight:700; letter-spacing:2.4px; text-transform:uppercase;
  color:var(--rc-cyan-clar); margin-bottom:8px}
.rc-sediu h3{font-size:30px; color:#fff; margin:0 0 8px}
.rc-sediu address{font-style:normal; font-size:14.5px; color:rgba(255,255,255,.80);
  margin-bottom:18px}
.rc-spre-harta{margin-top:auto; display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:.6px; color:var(--rc-cyan-clar)}
.rc-spre-harta svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .25s var(--rc-arc)}
.rc-spre-harta:hover svg{transform:translateX(4px)}

/* --- telefon ---------------------------------------------------------- */
@media (max-width:900px){
  .rc-cap{padding:66px 0 56px}
  .rc-cap h1{font-size:54px}
  .rc-actiuni{grid-template-columns:1fr; gap:12px}
  .rc-doua{grid-template-columns:1fr; gap:28px}
  .rc-formular{grid-row:auto}
  .rc-doua h2,.rc-mov h2{font-size:40px}
  .rdn-contact #contact-formular > .name-box,
  .rdn-contact #contact-formular > .name-box + .email-box{width:100%}
  .rc-sedii{grid-template-columns:1fr}
  .rc-alb,.rc-mov{padding:58px 0}
}