/*
Theme Name: STA - Science Technology & Applications
Theme URI: https://staou.ee
Author: Science Technology & Applications OÜ
Description: One-page website for Science Technology & Applications OÜ (STA OÜ). English and Estonian, sticky menu, and a contact form that sends messages to contact@staou.ee.
Version: 1.2.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sta
*/

/* Self-hosted fonts (SIL Open Font License, see assets/fonts) - no requests to Google */
@font-face{font-family:"Outfit";src:url("assets/fonts/Outfit-Regular.woff") format("woff");font-weight:400 549;font-style:normal;font-display:swap}
@font-face{font-family:"Outfit";src:url("assets/fonts/Outfit-Bold.woff") format("woff");font-weight:550 900;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("assets/fonts/InstrumentSans-Regular.woff") format("woff");font-weight:400 549;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("assets/fonts/InstrumentSans-Bold.woff") format("woff");font-weight:550 900;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("assets/fonts/IBMPlexMono-Regular.woff") format("woff");font-weight:400 599;font-style:normal;font-display:swap}

/* Base reset */
html{-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
/* Layout: one page, sticky menu. Sections alternate white / brand blue, colours taken from the STA logo. */
:root{
  color-scheme: light;
  --navy:#0B1F4B;
  --brand:#195D9A;
  --brand-light:#3997D1;
  --blue-from:#123F7A;
  --blue-to:#2A78BC;
  --blue-card:rgba(255,255,255,.10);
  --muted:#46597A;
  --white:#FFFFFF;
  --mist:#EEF5FC;
  --line:#D3E3F1;
  --ok:#1D7A4E; --ok-bg:#E3F4EB;
  --warn:#8A5A00; --warn-bg:#FFF2D6;
  --f-display:"Outfit","Segoe UI",system-ui,sans-serif;
  --f-body:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --wrap:1080px;
  --head:94px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--white);color:var(--navy);font-family:var(--f-body);font-size:16px;line-height:1.6;margin:0}
h1,h2,h3{font-family:var(--f-display);line-height:1.12;text-wrap:balance;margin:0;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--brand-light);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.eyebrow{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
section{scroll-margin-top:var(--head);padding-block:clamp(56px,8vw,96px)}
.sec-head{display:grid;gap:12px;margin-bottom:32px;max-width:62ch}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.6rem);font-weight:700}
.sec-head p{color:var(--muted);font-size:1.05rem}
.btn{display:inline-flex;align-items:center;gap:.5em;font:600 .95rem var(--f-body);padding:.8em 1.35em;border-radius:999px;border:2px solid var(--brand);text-decoration:none;cursor:pointer;transition:transform .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-solid{background:var(--brand);color:var(--white)}
.btn-ghost{background:transparent;color:var(--brand)}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--white);border-bottom:1px solid transparent;transition:border-color .2s, box-shadow .2s}
.top.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 20px -16px rgba(11,31,75,.5)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px 20px;padding-block:12px;flex-wrap:wrap}
.logo img{height:64px;width:auto;display:block}
.right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;max-width:100%}
.nav::-webkit-scrollbar{display:none}
.nav a{white-space:nowrap;text-decoration:none;font-weight:600;font-size:.92rem;padding:.5em .85em;border-radius:999px;color:var(--navy)}
.nav a:hover{background:var(--mist)}
.nav a.active{background:var(--mist);color:var(--brand)}
.lang{display:flex;border:1.5px solid var(--line);border-radius:999px;padding:2px;flex:none}
.lang button{font:600 .76rem var(--f-mono);letter-spacing:.05em;border:0;background:transparent;color:var(--muted);padding:.38em .7em;border-radius:999px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--navy);color:var(--white)}

/* hero */
.hero{position:relative;overflow:hidden;padding-block:clamp(64px,11vw,128px) clamp(56px,8vw,96px)}
.hero .wrap{position:relative;display:grid;gap:22px}
.hero h1{font-size:clamp(2.3rem,5.6vw,4.2rem);font-weight:800;max-width:17ch}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero p{font-size:1.15rem;max-width:54ch;color:var(--muted)}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.orbit{position:absolute;right:-60px;top:50%;transform:translateY(-50%) rotate(-18deg);width:min(520px,55vw);height:auto;pointer-events:none;opacity:.9}

/* strategy & growth (blue band) */
.blue{background:linear-gradient(115deg,var(--blue-from),var(--blue-to));color:var(--white)}
.blue .eyebrow{color:#CFE6F7}
.blue .sec-head p{color:#E3F0FA}
.areas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.areas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.areas{grid-template-columns:1fr}}
.areas li{background:var(--blue-card);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:20px;display:grid;gap:6px;align-content:start;min-width:0}
.areas b{font-family:var(--f-display);font-size:1.15rem;font-weight:700}
.areas span{font-size:.93rem;color:#E3F0FA}
.areas .open-card{padding:0;background:transparent;border:1.5px dashed rgba(255,255,255,.75)}
.areas .open-card a{display:grid;gap:6px;align-content:start;padding:20px;height:100%;text-decoration:none;border-radius:14px;transition:background .15s}
.areas .open-card a:hover{background:var(--blue-card)}
.areas .open-card .go{margin-top:6px;font-weight:600;color:var(--white)}
.blue .more{margin-top:28px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* about: vision + approach */
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,6vw,72px);align-items:start}
.vision{font-family:var(--f-display);font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:600;line-height:1.25;color:var(--navy);margin-top:14px;text-wrap:balance}
.vision em{font-style:normal;color:var(--brand)}
.about-grid .lead{margin-top:18px;color:var(--muted);font-size:1.05rem;max-width:52ch}
.approach{list-style:none;margin:16px 0 0;padding:0;display:grid}
.approach li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:4px 14px;padding:16px 0;border-bottom:1px solid var(--line)}
.approach li:first-child{padding-top:0}
.approach li::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--brand-light);box-shadow:0 0 0 4px var(--mist);margin-top:.45em;grid-row:span 2}
.approach b{font-size:1.05rem}
.approach span{color:var(--muted);font-size:.95rem}
.blue .btn{background:var(--white);color:var(--brand);border-color:var(--white)}

/* research & innovation */
.svc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:3px solid var(--brand-light)}
.svc article{padding:20px 20px 0 0;display:grid;gap:8px;align-content:start;min-width:0}
.svc article + article{padding-left:20px;border-left:1px solid var(--line)}
.svc .letter{font-family:var(--f-display);font-weight:800;font-size:2.6rem;line-height:1;color:var(--brand-light)}
.svc h3{font-size:1.2rem;color:var(--brand)}
.svc p{font-size:.95rem;color:var(--muted)}
.calls-box{margin-top:44px;background:var(--mist);border-radius:14px;padding:clamp(20px,3.5vw,32px);display:grid;gap:16px}
.calls-box h3{font-size:1.35rem}
.calls-box > p{color:var(--muted);max-width:62ch}
.news{list-style:none;margin:0;padding:0;display:grid}
.news li{border-bottom:1px solid var(--line)}
.news li:last-child{border-bottom:0}
.news a{display:grid;grid-template-columns:7.5rem minmax(0,1fr) auto;gap:4px 18px;align-items:baseline;padding:14px 4px;text-decoration:none;color:var(--navy)}
.news a:hover .tt{color:var(--brand);text-decoration:underline}
.news .d{font-family:var(--f-mono);font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.news .tt{font-weight:600;line-height:1.4}
.news .arr{color:var(--brand)}
.news li.empty{padding:12px 4px;color:var(--muted)}
.news li.empty a{display:inline;padding:0;color:var(--brand);text-decoration:underline}
.news-src{font-size:.82rem;color:var(--muted)}
.news-src a,.news-cta a{color:var(--brand);font-weight:600}
.news-cta{margin-top:22px;font-size:1.05rem}

/* team */
.team{background:var(--mist)}
.team-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,56px);align-items:start}
.jobs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.jobs li{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:10px;padding:12px 16px}
.jobs li b{display:block}
.jobs li span{font-size:.85rem;color:var(--muted)}
.empty{background:var(--white);border:1.5px dashed var(--line);border-radius:10px;padding:16px 18px;color:var(--muted)}

/* contact */
.mail-card{display:grid;gap:6px;padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:var(--white)}
.mail-card .lbl{font-size:.85rem;color:var(--muted)}
.mail-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mail-row code{font-family:var(--f-mono);font-size:1rem;color:var(--navy);user-select:all;overflow-wrap:anywhere}
.mail-row button{font:600 .78rem var(--f-body);padding:.4em .85em;border-radius:999px;cursor:pointer;border:1.5px solid var(--brand);background:transparent;color:var(--brand)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(20px,4vw,40px);align-items:start}

/* contact form */
form{display:grid;gap:14px;min-width:0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:grid;gap:6px;font-size:.88rem;font-weight:600}
input,select,textarea{font:inherit;font-weight:400;font-size:1rem;padding:.7em .85em;border-radius:10px;border:1.5px solid var(--line);background:var(--white);color:var(--navy);width:100%;min-width:0}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--mist)}
textarea{resize:vertical;min-height:120px}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.check input{width:auto;margin-top:.25em;flex:none}
.check a{color:var(--brand)}
.form-note{font-size:.92rem;padding:10px 12px;border-radius:10px;background:var(--mist);color:var(--brand)}
.social{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.social a{color:var(--brand);display:block;width:34px;height:34px;border-radius:8px;transition:transform .15s,color .15s}
.social a:hover{color:var(--navy);transform:translateY(-1px)}
.social svg{width:100%;height:100%;display:block}
.privacy p{margin-top:12px;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.privacy summary + p{margin-top:14px}
/* footer */
footer{border-top:1px solid var(--line);padding-block:28px;font-size:.85rem;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
footer .meta b{color:var(--navy)}
.privacy{margin-top:20px;border-top:1px solid var(--line);padding-top:14px;width:100%}
.privacy summary{cursor:pointer;font-weight:600;color:var(--brand)}
.privacy[open]{display:grid;gap:10px}
.privacy p{font-size:.85rem;line-height:1.55}
.privacy b{color:var(--navy)}
footer img{height:58px;width:auto;display:block}
footer .meta{display:grid;gap:2px;text-align:right}

@media (max-width:900px){
  .svc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about-grid{grid-template-columns:1fr}
  .svc article:nth-child(3){padding-left:0;border-left:0}
  .svc article:nth-child(n+3){border-top:1px solid var(--line);margin-top:12px;padding-top:16px}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  :root{--head:70px}
  .logo img{height:88px}
  /* phone: the logo row scrolls away, the menu row stays pinned */
  .top{top:calc(env(safe-area-inset-top,0px) - 100px)}
  .nav{flex:1 1 auto;min-width:0;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent);padding-right:24px}
  .top .wrap{padding-block:10px;row-gap:10px}
  .right{width:100%;justify-content:space-between;flex-wrap:nowrap}
  .team-grid{grid-template-columns:1fr}
  .news a{grid-template-columns:minmax(0,1fr) auto}
  .news .d{grid-column:1/-1}
  .orbit{opacity:.35;right:-140px;width:420px}
  footer .meta{text-align:left}
  .social{justify-content:flex-start}
  .row2{grid-template-columns:1fr}
}
@media (max-width:520px){
  .svc{grid-template-columns:1fr}
  .svc article{padding-left:0!important;border-left:0!important}
  .svc article + article{border-top:1px solid var(--line);margin-top:12px;padding-top:16px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Spam trap field, invisible to people */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-note.err{background:#FDECEC;color:#9B1C1C}

/* Keep the sticky menu below the WordPress admin bar (only visible when logged in) */
.admin-bar .top{top:32px}
@media (max-width:782px){.admin-bar .top{top:46px}}
@media (max-width:720px){.admin-bar .top{top:calc(46px - 100px)}}
@media (max-width:600px){.admin-bar .top{top:-100px}}