/* Vivantech - stiluri responsive (mobile-first). Inlocuieste 5grid + style*.css */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:1rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#202020 url(images/img01.jpg) repeat;font:1rem/1.6 Arial,Helvetica,sans-serif;color:#525252;overflow-wrap:break-word}
img{max-width:100%;height:auto;border:0}
h1,h2,h3{margin:0;font-family:'Oswald','Arial Narrow',Arial,sans-serif;font-weight:300}
p{margin:0 0 1em}
a{color:#1d7cab}
strong{color:#2a2a2a}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #43a4d3;outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1248px;margin:0 auto;padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right))}

/* Header + meniu */
.site-header{position:relative;z-index:10;background:#1c1c1c url(images/img01.jpg) repeat;box-shadow:0 0 10px 2px rgba(0,0,0,.75)}
.header-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
.logo{display:block;line-height:0;padding:.5rem 0}
.logo img{height:48px;width:auto}
.nav-toggle{display:none;width:48px;height:48px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.js .nav-toggle{display:block}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{position:absolute;left:12px;width:24px;height:3px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s}
.nav-toggle span{top:22px}
.nav-toggle span::before{content:"";left:0;top:-8px}
.nav-toggle span::after{content:"";left:0;top:8px}
.nav-open .nav-toggle span{background:transparent}
.nav-open .nav-toggle span::before{transform:translateY(8px) rotate(45deg)}
.nav-open .nav-toggle span::after{transform:translateY(-8px) rotate(-45deg)}
.site-nav{flex-basis:100%}
.js .site-nav{display:none}
.js .nav-open .site-nav{display:block}
.site-nav ul{list-style:none;margin:0;padding:0 0 .5rem}
.site-nav a{display:flex;align-items:center;min-height:48px;padding:0 .25rem;border-top:1px solid #303030;color:#fff;text-decoration:none;font-family:'Oswald','Arial Narrow',Arial,sans-serif;font-size:1.125rem}
.site-nav a[aria-current]{background:#2c2c2c;border-left:4px solid #43a4d3;padding-left:.75rem}

/* Banner */
.banner .wrap{padding-left:0;padding-right:0}
.banner img{display:block;width:100%}
.banner-frame{background:#fff}

/* Butoane */
.btn{display:inline-flex;align-items:center;gap:.75rem;min-height:44px;margin-top:1rem;padding:0 1rem 0 1.25rem;border-radius:5px;background:linear-gradient(#01c231,#008303);color:#fff;text-decoration:none;line-height:1}
.btn::after{content:"";border-left:7px solid #b6f26b;border-top:5px solid transparent;border-bottom:5px solid transparent}
.btn:hover{filter:brightness(1.1)}

/* Zone albe */
.main-wrap{background:#fff;padding:2rem 0;margin-bottom:2rem}
.marketing{display:grid;gap:2rem 1.5rem;grid-template-columns:1fr;padding-bottom:2rem}
.marketing h2{font-size:1.5rem;color:#272727;margin-bottom:.4rem}
.subtitle{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:1.1rem;font-weight:300;line-height:1.3;color:#7d7d7d;margin:.4rem 0 1rem}
.marketing .subtitle{margin-top:0}
.marketing img,.content img{display:block;width:100%;height:auto}
.post{padding-bottom:1.5rem}
.content h2{font-size:clamp(1.75rem,6vw,2.5rem);line-height:1.2;color:#2a2a2a}
.content h3{font-size:1.5rem;line-height:1.3;color:#2a2a2a;margin:2rem 0 .75rem;scroll-margin-top:1rem}
.content h3.subtitle{font-size:1.25rem;color:#7d7d7d;margin-top:2rem;font-weight:300}
.content>.post>img{margin-bottom:1.25rem}
.content p,.content ul{max-width:80ch}
.bullets{margin:0 0 1em;padding-left:1.25rem}
.bullets li{margin-bottom:.35rem}
.page-grid{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr)}

/* Liste de linkuri / cuprins */
.link-list{list-style:none;margin:0;padding:0}
.link-list li{border-top:1px solid #e6e6e6}
.link-list li:first-child{border-top:0}
.link-list a{display:block;min-height:44px;padding:.65rem 0 .65rem 1.6rem;background:url(images/img10.png) no-repeat .2rem center;color:#525252;text-decoration:none}
.link-list a:hover{text-decoration:underline}
.sidebar h2{font-size:1.5rem;color:#2a2a2a;padding-bottom:1rem}
.toc summary{display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:.5rem 1rem;list-style:none;cursor:pointer;background:#f3f3f3;border:1px solid #e0e0e0;border-radius:5px;font:300 1.15rem 'Oswald','Arial Narrow',Arial,sans-serif;color:#2a2a2a}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"";width:.6rem;height:.6rem;margin:-.25rem 0 0 1rem;border-right:2px solid #525252;border-bottom:2px solid #525252;transform:rotate(45deg);transition:transform .2s}
.toc[open] summary::after{transform:rotate(-135deg);margin-top:.25rem}
.toc[open] .link-list{margin-top:.5rem}

/* Zona featured (carduri) */
.featured{display:grid;gap:1.25rem;grid-template-columns:1fr;padding-bottom:2rem;margin-bottom:2rem;border-bottom:1px solid #303030}
.box-style{display:flex;gap:1.25rem;align-items:flex-start;padding:1.5rem;background:url(images/img07.png) repeat}
.box-style img{flex:0 0 40%;width:40%;max-width:160px;height:auto}
.box-style h3{font:400 1.2rem Arial,Helvetica,sans-serif;color:#171717;margin-bottom:.5rem}
.box-style p{margin:0}

/* Footer */
.footer-cols{display:grid;gap:2rem 1.5rem;grid-template-columns:1fr;padding-bottom:2rem;color:#9a9a9a}
.footer-cols h2{font-size:1.5rem;color:#fff;padding-bottom:1rem}
.balloon{padding:1.25rem 1.5rem;background:url(images/img08.jpg) repeat;border-radius:5px;font:italic 1rem/1.8 Georgia,'Times New Roman',serif;color:#525252}
.balloon p{margin:0}
.balloon a{display:inline-block;padding:.2rem 0;color:#1d6f9a}
.balloon-tail{height:30px;background:url(images/img09.png) no-repeat right top}
.social{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.social a{display:block;padding:.4rem 0;line-height:0}
.copyright{border-top:1px solid #303030;padding:1.5rem 0;text-align:center;font-family:'Abel','Arial Narrow',Arial,sans-serif;font-size:1.1rem;color:#9a9a9a}
.copyright p{margin:0}
.copyright a{color:#b0b0b0}

/* Contact */
.contact-list{display:grid;grid-template-columns:max-content 1fr;gap:.25rem 1rem;margin:0 0 1.5rem;font-size:1.1rem}
.contact-list dt,.contact-list dd{margin:0}
.contact-list a{display:inline-block;padding:.35rem 0}
address{font-style:normal;font-size:1.1rem}
.company{font-size:1.4rem;color:#2a2a2a}

/* Tablete portrait */
@media (min-width:600px){
  .banner .wrap{padding:1.5rem max(1rem,env(safe-area-inset-right)) 1.5rem max(1rem,env(safe-area-inset-left))}
  .banner-frame{padding:1rem;background:#fff url(images/img02.jpg) repeat}
  .marketing{grid-template-columns:repeat(2,1fr)}
  .footer-cols{grid-template-columns:repeat(2,1fr)}
  .main-wrap{padding:3rem 0 2rem}
}

/* Desktop / tablete landscape */
@media (min-width:1000px){
  body{font-size:.9375rem}
  .site-header{background:url(images/img02.jpg) repeat;box-shadow:none}
  .header-inner{flex-wrap:nowrap;min-height:70px}
  .logo{padding:.35rem 0}
  .logo img{height:55px}
  .nav-toggle,.js .nav-toggle{display:none}
  .site-nav,.js .site-nav{display:block;flex-basis:auto}
  .site-nav ul{display:flex;padding:0}
  .site-nav a{height:70px;border:0;padding:0 1.25rem;color:#2c2c2c;font-family:'Abel','Arial Narrow',Arial,sans-serif;font-size:1.05rem}
  .site-nav a[aria-current]{background:#212121;color:#fff;box-shadow:inset 0 -15px 10px rgba(0,0,0,.25);border:0;padding-left:1.25rem}
  .banner .wrap{padding-top:3rem;padding-bottom:3rem}
  .banner-frame{padding:1.5rem}
  .main-wrap{padding:4rem 0 2rem;margin-bottom:3.5rem}
  .marketing{grid-template-columns:repeat(4,1fr);gap:2rem;padding-bottom:3rem;margin-bottom:3rem;border-bottom:1px solid #d4d6d8}
  .marketing h2{font-size:2rem}
  .subtitle{font-size:1.25rem}
  .page-grid{grid-template-columns:23.5% 74.5%;justify-content:space-between}
  .page-grid.home{grid-template-columns:49% 23.5%}
  .toc summary{pointer-events:none;cursor:default;padding:0 0 1rem;min-height:0;background:none;border:0;font-size:2rem}
  .toc summary::after{display:none}
  .toc--quiet summary{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);padding:0}
  .sidebar h2{font-size:2rem}
  .featured{grid-template-columns:repeat(3,1fr);gap:1.5rem}
  .box-style{padding:2rem}
  .footer-cols{grid-template-columns:repeat(4,1fr);padding-top:1rem}
  .footer-cols h2{font-size:2rem}
}