/* Site chrome shared by every /new page, hand-built or reskinned: skip link,
   header and menus, the preview banner and the footer, plus the small
   utilities they use (.wrap, .muted, .mono, .text-link). Class selectors only:
   the reskinned live pages load this without base.css, so the few element
   rules the chrome needs are scoped to the chrome itself. Tokens: tokens.css. */

:where(.site-header,.site-footer,.preview-notice,.skip){font-family:var(--font-body);font-size:var(--text-body);line-height:var(--lh-body);
  font-synthesis:none;-webkit-font-smoothing:antialiased}
:where(.site-header,.site-footer,.preview-notice) :where(*,*::before,*::after){box-sizing:border-box}
:where(.site-header,.site-footer,.preview-notice) :where(svg){display:block;flex:none;width:var(--icon);height:var(--icon)}
:where(.site-header,.site-footer) :where(ul){list-style:none;margin:0;padding:0}
:where(.site-header,.site-footer) :where(p,address,h2,h3,figure){margin:0}
:where(.site-header,.site-footer,.preview-notice) :where(a){color:inherit;text-underline-offset:var(--s1)}
:where(.site-header,.site-footer,.preview-notice) :where(button){font:inherit;color:inherit;cursor:pointer}
:where(.site-header,.site-footer,.preview-notice) :focus-visible{outline:3px solid var(--focus-color);outline-offset:var(--focus-offset)}

.wrap{width:min(100% - var(--gutter) * 2,var(--max-width));margin-inline:auto}
.muted{color:var(--fg-muted)}
.mono{font-family:var(--font-mono);font-size:var(--text-mono)}
.text-link{display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--touch-min);max-width:100%;font-weight:500;text-decoration:none;width:fit-content}
.text-link svg{flex:none;width:var(--s4);height:var(--s4)}
.skip{position:fixed;top:var(--s2);left:var(--s4);z-index:30;background:var(--lime);color:var(--carbon);padding:var(--s3) var(--s4);transform:translateY(-200%)}
.skip:focus{transform:translateY(0)}

/* Header (innovadata-home.html layout). */
.brand{display:block;flex:none;width:var(--logo-width);line-height:0}
.brand img{width:100%;height:auto;display:block}
.site-header{--nav-height:72px;--nav-logo:164px;--nav-gutter:48px;--nav-max:1312px;--nav-inset:10px;--nav-underline-offset:7px;--nav-menu-width:200px;
  position:sticky;top:0;z-index:20;background:var(--paper);color:var(--carbon);border-bottom:var(--rule) solid var(--border)}
.site-header>.wrap{width:100%;max-width:var(--nav-max);padding-inline:var(--nav-gutter)}
.header-bar{display:flex;align-items:center;gap:var(--s6);min-height:var(--nav-height)}
.site-header .brand{width:var(--nav-logo);padding-block:var(--s3);border-radius:var(--radius-control)}
.primary-nav{flex:1;min-width:0}
.primary-nav ul{display:flex;gap:var(--s1)}
.nav-link{display:inline-flex;align-items:center;min-height:var(--touch-min);padding-inline:var(--nav-inset);font-weight:500;text-decoration:none;border-radius:var(--radius-control);white-space:nowrap}
.header-tools{display:flex;align-items:center;gap:var(--s3);margin-left:auto}
.lang{position:relative}
.lang-button svg{width:var(--s4);height:var(--s4);fill:none;stroke:currentColor;stroke-width:1.6;transition:transform var(--time-hover) var(--ease)}
.lang-button[aria-expanded=true] svg{transform:rotate(180deg)}
.lang-menu{position:absolute;right:0;top:calc(100% + var(--s2));z-index:40;min-width:var(--nav-menu-width);padding:var(--s2);background:var(--surface);
  border:var(--rule) solid var(--control-rule);border-radius:var(--radius-panel);box-shadow:var(--shadow-overlay)}
.lang-menu a{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);min-height:var(--touch-min);padding-inline:var(--s3);text-decoration:none;border-radius:var(--radius-control)}
.lang-menu a:focus-visible{background:var(--selection);outline-offset:0}
.lang-menu a[aria-current=true]{font-weight:500}
.lang-menu a[aria-current=true]::after{content:"Current";font-size:var(--text-label);color:var(--muted)}
.lang-menu a[aria-current=true][lang=et]::after{content:"Valitud"}
.menu-toggle{display:none}
.mobile-nav{border-top:var(--rule) solid var(--border);padding-block:var(--s2) var(--s6)}
.mobile-nav li{border-bottom:var(--rule) solid var(--border)}
.mobile-nav .nav-link{display:flex;width:100%;min-height:var(--control-size);padding-inline:0;font-size:var(--text-body)}
.mobile-nav .portal{margin-top:var(--s6)}

/* The Verdite underline that grows under navigation and text links. */
:is(.primary-nav .nav-link,.hero-support a,.text-link,.support-email,.footer-links a){position:relative;text-decoration:none}
:is(.primary-nav .nav-link,.hero-support a,.text-link,.support-email,.footer-links a)::after{content:"";position:absolute;left:var(--nav-inset,0px);right:var(--nav-inset,0px);
  bottom:var(--nav-underline-offset,7px);height:3px;background:var(--link-mark);clip-path:polygon(0 0,calc(100% - 3px) 0,100% 100%,0 100%);
  transform:scaleX(0);transform-origin:left center;transition:transform var(--time-enter) var(--ease)}
:is(.primary-nav .nav-link,.hero-support a,.text-link,.support-email,.footer-links a):focus-visible::after{transform:scaleX(1)}
@media(hover:hover){
  :is(.primary-nav .nav-link,.hero-support a,.text-link,.support-email,.footer-links a):hover::after{transform:scaleX(1)}
  .mobile-nav .nav-link:hover{text-decoration:underline}
  .lang-button:hover,.menu-toggle:hover,.lang-menu a:hover{background:var(--selection)}
}
@media(max-width:1023px){.primary-nav{display:none}.menu-toggle{display:inline-flex}.site-header{--nav-gutter:32px}}
@media(max-width:767px){.site-header{--nav-gutter:16px;--nav-logo:148px;--nav-height:64px}.header-portal{display:none}.header-bar{gap:var(--s3)}}

/* Preview banner: one line. Phones get the short wording (same meaning: live
   counts and prices, demo payments, a link to the live site). */
.preview-notice{background:var(--carbon);color:var(--surface);font-size:var(--text-sm);line-height:1.4}
.preview-notice .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s4);min-height:var(--touch-min)}
.preview-notice strong{font-weight:500}
.preview-notice a{display:inline-flex;align-items:center;min-height:var(--touch-min);color:var(--surface);text-decoration:underline;
  text-decoration-color:var(--lime);text-decoration-thickness:2px}
.preview-notice a:focus-visible{outline-color:var(--lime)}
.preview-notice .pn-short{display:none}
/* The portal page carries both languages; html[lang] picks one. */
.preview-notice :is(.pn-en,.pn-et){display:contents}
html[lang=et] .preview-notice .pn-en,html:not([lang=et]) .preview-notice .pn-et{display:none}
@media(max-width:767px){
  .preview-notice .wrap{flex-wrap:nowrap;gap:var(--s3);width:100%;padding-inline:16px}
  .preview-notice .pn-long{display:none}
  .preview-notice .pn-short{display:inline;min-width:0}
  .preview-notice a{margin-left:auto;white-space:nowrap}
}

/* Footer: a dark surface (tokens.css .nd-dark on the element). */
.site-footer{padding-block:var(--s12)}
.footer-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s8)}
.footer-brand{--od-gap:var(--s4)}
.footer-brand .brand{width:var(--logo-width);min-height:var(--touch-min);display:flex;align-items:center}
.footer-brand p{font-size:var(--text-sm);color:var(--fg-muted)}
.footer-links{--od-gap:var(--s6)}
.footer-links a{min-height:var(--touch-min);min-width:var(--touch-min);display:flex;align-items:center;font-size:var(--text-sm);text-decoration:none}
.seller-details{--od-gap:var(--s1);font-size:var(--text-body);max-width:70ch}
.seller-details strong{font-weight:500;color:var(--fg)}
.seller-details address{font-style:normal;overflow-wrap:anywhere}
.footer-bottom{--od-gap:var(--s6);justify-content:space-between;margin-top:var(--s8);padding-top:var(--s6);border-top:var(--rule) solid var(--rule-color);
  font-size:var(--text-sm);color:var(--fg-muted)}
@media(max-width:767px){.footer-top{flex-direction:column}.footer-links{--od-gap:var(--s4)}.footer-bottom{align-items:flex-start;flex-direction:column;--od-gap:var(--s2)}}
@media(prefers-reduced-motion:reduce){:is(.primary-nav .nav-link,.hero-support a,.text-link,.support-email,.footer-links a)::after,.lang-button svg{transition:none}}

/* Keep the language and menu controls inside a 320 px viewport. */
@media(max-width:374px){
 .site-header{--nav-logo:128px;--nav-gutter:12px}
 .header-bar,.header-tools{gap:var(--s2)}
 .header-tools .header-button{padding-inline:var(--s3)}
}