/*
Theme Name: TURAB
Theme URI: https://turab.bg
Author: TURAB
Description: Group website for TURAB and its four brands: Agrotrakia, Predost, Ekamed and Predo.bg.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: turab
*/

:root{--bg:#f6f9f1;--ink:#0e2a16;--mute:#4d6354;--g:#07a017;--o:#f58409;--card:#fff;--line:#d9e4d3;--deep:#0b2412}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 17px/1.65 Outfit,system-ui,sans-serif;overflow-x:hidden}
h1,h2,h3{font-family:Unbounded,Outfit,sans-serif;line-height:1.15;font-weight:500;text-wrap:balance}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--o);outline-offset:3px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

#swoosh{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#swoosh path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-width:3}

.site-header{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(18px,4vw,56px);background:rgba(246,249,241,.86);backdrop-filter:blur(10px)}
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:46px}}
.site-header img{height:34px;width:auto}
.site-nav{display:flex;gap:clamp(14px,3vw,38px)}
.site-nav a{text-decoration:none;font-weight:500;font-size:15px;padding:6px 0;border-bottom:2px solid transparent;transition:border-color .25s}
.site-nav a:hover,.site-nav a[aria-current="page"]{border-color:var(--o)}
.site-header .progress{display:none}
main{position:relative;z-index:1}
.wrap{max-width:1160px;margin:auto;padding:0 clamp(20px,4vw,48px)}
.block{padding:clamp(60px,10vh,110px) clamp(20px,4vw,48px)}
.lead{color:var(--mute);max-width:36em;margin-top:18px}
h2{font-size:clamp(26px,4vw,46px);max-width:17em}
.textlink,.visit{display:inline-block;margin-top:26px;font-weight:500;text-decoration:none;border-bottom:2px solid var(--o);padding-bottom:2px;transition:color .25s,border-color .25s}
.textlink:hover,.visit:hover{border-color:var(--g)}
.visit{background:var(--c);color:var(--on);border:0;border-radius:99px;padding:13px 26px;transition:transform .3s,box-shadow .3s}
.visit:hover{transform:translateY(-3px);box-shadow:0 12px 24px -12px var(--c)}
.btn{display:inline-block;font:500 16px Outfit,sans-serif;background:var(--g);color:#fff;border:0;border-radius:99px;padding:14px 28px;text-decoration:none;cursor:pointer;transition:background .3s,transform .3s}
.btn:hover{background:var(--o);transform:translateY(-3px)}
.soon{margin-top:26px;display:inline-block;padding:10px 20px;border-radius:99px;border:2px dashed var(--c);font-weight:500}

/* Hero: logo reveal, headline, four brand cards */
.hero{padding:130px 0 clamp(50px,8vw,90px)}
.hero .logo{width:min(440px,80%);opacity:0;clip-path:inset(0 100% 0 0);animation:wipe 1.6s .3s cubic-bezier(.7,0,.2,1) forwards}
@keyframes wipe{to{opacity:1;clip-path:inset(0 0 0 0)}}
.hero h1{font-size:clamp(32px,6vw,72px);max-width:12em;margin-top:44px;opacity:0;animation:up .9s 1.5s forwards}
.hero .tagline{max-width:34em;margin-top:22px;color:var(--mute);font-size:clamp(18px,2vw,22px);opacity:0;animation:up .9s 1.8s forwards}
.hero .textlink{opacity:0;animation:up .9s 2s forwards}
@keyframes up{from{transform:translateY(24px)}to{opacity:1;transform:none}}
.hero-cards{margin-top:clamp(40px,6vw,64px);display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.hero-card{display:flex;flex-direction:column;aspect-ratio:4/5;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:14px;text-decoration:none;position:relative;overflow:hidden;opacity:0;animation:up .9s calc(2.2s + var(--i)*.15s) forwards;transition:transform .4s,border-color .4s,box-shadow .4s}
a.hero-card:hover,a.hero-card:focus-visible{transform:translateY(-8px);border-color:var(--c);box-shadow:0 22px 40px -26px var(--c)}
.plate{display:grid;place-items:center;background:#fff;border-radius:20px}
.hero-card .plate{flex:1;min-height:0;padding:18px;position:relative;overflow:hidden}
.hero-card .plate::before{content:"";position:absolute;inset:auto -15% -50% -15%;height:75%;border-radius:50%;background:var(--c);opacity:.1;transition:transform .7s,opacity .7s}
a.hero-card:hover .plate::before{transform:translateY(-12%) scale(1.1);opacity:.18}
.hero-card .plate img{position:relative;max-height:100%;max-width:76%;object-fit:contain}
.hero-card .meta{display:grid;gap:2px;padding:14px 8px 4px;border-top:4px solid var(--c);margin-top:12px}
.hero-card strong{font:500 18px Unbounded,sans-serif}
.hero-card .meta span{color:var(--mute);font-size:15px;line-height:1.4}
.hero-card .go{padding:6px 8px 4px;font-weight:500;font-size:15px}
span.hero-card .go{color:var(--mute)}

/* Intro */
.intro-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(30px,6vw,80px);align-items:start}
.facts{list-style:none;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.facts li{padding:18px 0 18px 22px;border-bottom:1px solid var(--line);font-weight:500;position:relative}
.facts li::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--g)}
.facts li:nth-child(even)::before{background:var(--o)}

/* Brand sections */
.brand-sec{border-top:1px solid var(--line)}
.brand-head{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:clamp(24px,5vw,70px);align-items:center}
.brand-head .plate{aspect-ratio:1/.9;padding:28px;border:1px solid var(--line);position:relative;overflow:hidden}
.brand-head .plate img{max-height:100%;max-width:80%;object-fit:contain}
.social{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.social a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--c);color:var(--c);background:#fff;transition:background .25s,color .25s,transform .25s}
.social a:hover,.social a:focus-visible{background:var(--c);color:var(--on);transform:translateY(-3px)}
.social svg{width:19px;height:19px;fill:currentColor}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:clamp(32px,5vw,54px)}
.tile{padding:26px 24px 28px;border-radius:22px;background:color-mix(in srgb,var(--c) 9%,#fff);border-top:5px solid var(--c)}
.tile h3{font-size:19px}
.tile p{margin-top:10px;color:var(--mute);font-size:16px;line-height:1.55}

/* Why */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(24px,4vw,48px);margin-top:48px}
.why-grid svg{width:44px;height:44px;fill:none;stroke:var(--g);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.why-grid div:nth-child(even) svg{stroke:var(--o)}
.why-grid h3{font-size:19px;margin:18px 0 8px}
.why-grid p{color:var(--mute);font-size:16px}

/* Numbers */
.stats-band{position:relative;z-index:1;background:var(--deep);color:#fff;padding:clamp(60px,10vh,100px) 0}
.stats-band h2{max-width:none}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:34px;margin-top:44px}
.stats-grid b{display:block;font:700 clamp(40px,6vw,68px)/1 Unbounded,sans-serif;color:var(--o);font-variant-numeric:tabular-nums}
.stats-grid div:nth-child(even) b{color:#4fd25f}
.stats-grid span{display:block;margin-top:12px;color:#b8cdb9;font-size:16px;max-width:15em}

/* Where */
.where-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(24px,5vw,60px);margin-top:44px}
.where-card{position:relative;overflow:hidden;isolation:isolate;border-radius:26px;padding:clamp(24px,4vw,40px);border:1px solid var(--line);background:#fff;min-height:240px}
.where-card h3{font-size:24px;margin-bottom:10px}
.where-card p{color:var(--ink);max-width:30em}
.flag-bg-layer{position:absolute;inset:0;z-index:-1;opacity:.2;background:linear-gradient(to bottom,#fff 0 33.4%,#00966e 33.4% 66.7%,#d62612 66.7%)}
.flag-tr{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.17}

/* CTA */
.cta-box{padding:clamp(34px,6vw,64px);border-radius:32px;background:var(--g);color:#fff;position:relative;overflow:hidden}
.cta-box::after{content:"";position:absolute;right:-8%;bottom:-60%;width:55%;aspect-ratio:1;border-radius:50%;background:var(--o);opacity:.9}
.cta-box>*{position:relative;z-index:1}
.cta-box h2{font-size:clamp(26px,4vw,44px)}
.cta-box p{margin:16px 0 28px;max-width:32em}
.cta-box .btn{background:#fff;color:var(--deep)}
.cta-box .btn:hover{background:var(--deep);color:#fff}

/* Scroll reveal: visible by default, hidden only when JS marks it */
.rv{transition:opacity .9s,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*120ms)}
.rv.hide{opacity:0;transform:translateY(46px)}
.rv.hide.in{opacity:1;transform:none}

.page{padding-top:150px}
.page h1{font-size:clamp(34px,6vw,70px)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:40px;margin-top:50px}
.two div{padding-top:20px;border-top:3px solid var(--g)}
.two div:nth-child(even){border-color:var(--o)}
.two h3{font-size:20px;margin-bottom:10px}
.entry>*+*{margin-top:1em}

.gal,.gallery-page .wp-block-gallery{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-top:50px}
.gallery-page .wp-block-gallery figure{margin:0!important;width:auto!important;border-radius:22px;overflow:hidden}
.gallery-page .wp-block-gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.gal figure{aspect-ratio:4/5;border-radius:22px;position:relative;overflow:hidden;background:linear-gradient(160deg,var(--a),var(--b))}
.gal figure::after{content:"";position:absolute;width:140%;height:50%;left:-20%;bottom:-18%;border-radius:50%;background:#ffffff30}
.gal figcaption{position:absolute;left:18px;bottom:16px;z-index:1;color:#fff;font-weight:500}
.note{margin-top:20px;padding:14px 18px;border-radius:14px;background:#fff3e0;border:1px solid #f1c27d;font-size:15px}

form.contact{display:grid;gap:16px;max-width:560px;margin-top:40px}
label{display:grid;gap:6px;font-weight:500;font-size:15px}
input,textarea{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
textarea{min-height:140px;resize:vertical}
.hp{position:absolute;left:-9999px}
.msg{margin-top:30px;padding:16px 20px;border-radius:14px;max-width:560px;font-weight:500}
.msg.ok{background:#e4f5e6;border:1px solid #9fd6a6}
.msg.err{background:#fde8e8;border:1px solid #e7a3a3}
.info{margin-top:44px;color:var(--mute)}
.info a{text-decoration:none;border-bottom:1px solid var(--line)}



@media (max-width:560px){.site-nav a{font-size:13px}.site-header img{height:26px}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-delay:0s!important;transition:none!important}.rv{opacity:1;transform:none}.hero .logo,.hero p,.hero .cue{opacity:1;clip-path:none}html{scroll-behavior:auto}}

.site-footer{position:relative;z-index:1;margin-top:60px;background:var(--deep);color:#d6e6d4;padding:clamp(48px,8vw,80px) clamp(20px,4vw,56px) 28px}
.foot-wrap{max-width:1160px;margin:auto;display:grid;grid-template-columns:1.3fr .7fr .9fr 1.6fr;gap:clamp(28px,5vw,64px)}
.foot-logo{display:inline-block;background:#fff;border-radius:16px;padding:12px 18px}
.foot-logo img{height:34px;width:auto}
.foot-about p{margin-top:20px;max-width:24em;color:#a9c2ab}
.foot-col{display:grid;gap:10px;align-content:start}
.foot-col h2{font:500 16px Unbounded,sans-serif;color:#fff;margin-bottom:6px;max-width:none}
.foot-loc address{font-style:normal;color:#d6e6d4;line-height:1.55}
.foot-loc address strong{display:block;color:#fff;font-weight:500}
.foot-loc address+a{margin-top:-2px}
.foot-col a{color:#d6e6d4;text-decoration:none;width:fit-content;border-bottom:1px solid transparent;transition:border-color .25s,color .25s}
.foot-col a:hover,.foot-col a:focus-visible{color:#fff;border-color:var(--o)}
.foot-base{max-width:1160px;margin:clamp(36px,6vw,64px) auto 0;padding-top:22px;border-top:1px solid #24412c;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:14px;color:#8fa990}
.foot-line{display:flex;gap:6px}
.foot-line i{display:block;width:48px;height:4px;border-radius:4px;background:var(--g)}
.foot-line i+i{background:var(--o);width:28px}
@media (max-width:980px){.foot-wrap{grid-template-columns:1fr 1fr}.foot-about{grid-column:1/-1}}
@media (max-width:480px){.foot-wrap{grid-template-columns:1fr}}

@media (max-width:820px){
 .intro-grid,.brand-head{grid-template-columns:1fr}
 .brand-head .plate{max-width:300px;aspect-ratio:1/.7}
 .hero-card{aspect-ratio:auto;min-height:300px}
 .hero-card .plate{min-height:140px}
}
@media (max-width:560px){.site-nav a{font-size:13px}.site-header img{height:26px}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-delay:0s!important;transition:none!important}.rv.hide{opacity:1;transform:none}.hero .logo,.hero h1,.hero .tagline,.hero .textlink,.hero-card{opacity:1;clip-path:none}html{scroll-behavior:auto}}

/* Phones: no stretched swoosh lines. A soft glow and a thin progress line under the header instead. */
@media (max-width:700px){
 #swoosh{display:none}
 body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(90% 38% at 100% 0%,rgba(7,160,23,.12),transparent 70%),radial-gradient(90% 38% at 0% 100%,rgba(245,132,9,.12),transparent 70%)}
 .site-header{position:fixed}
 .site-header .progress{display:block;position:absolute;left:0;right:0;bottom:0;height:3px}
 .site-header .progress i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--g),var(--o))}
}

/* About page */
.scene{margin-top:44px}
.scene-svg{display:block;width:100%;height:auto;border-radius:28px;overflow:hidden}
.scene-svg .truck{animation:drive 14s linear infinite alternate}
@keyframes drive{from{transform:translate(300px,290px)}to{transform:translate(480px,290px)}}
.story{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center;margin-top:64px}
.story h2{font-size:clamp(24px,3.4vw,38px);margin-bottom:18px}
.story p{color:var(--mute);margin-top:14px;max-width:34em}
.story a{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--o);text-underline-offset:4px}
.story a:hover{color:var(--g)}
.office{margin:0}
.office img{width:100%;height:auto;display:block;border-radius:22px;box-shadow:0 20px 50px -24px rgba(11,36,18,.5)}
.office figcaption{font-size:13px;color:var(--mute);margin-top:10px}
.two a{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--o);text-underline-offset:3px}
@media (max-width:800px){.story{grid-template-columns:1fr;gap:30px}.scene-svg{border-radius:18px}}
@media (prefers-reduced-motion:reduce){.scene-svg .truck{animation:none;transform:translate(380px,290px)}}