/* ============================================================
   MicroField — redesign skin (loaded last, overrides st_vela).
   Keeps Joomla/st_vela structure & links; new visual identity.
   Clean single-pass stylesheet (supersedes earlier v1/v2/v3).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --mf-navy:#13223f;      /* deep base            */
  --mf-navy2:#1d3058;     /* gradient partner     */
  --mf-ink:#22304a;       /* body text            */
  --mf-accent:#0a84c4;    /* primary accent       */
  --mf-accent2:#17b6e6;   /* light accent / hover */
  --mf-bg:#f4f6fa;        /* page ground          */
  --mf-panel:#ffffff;     /* cards                */
  --mf-muted:#64748b;     /* secondary text       */
  --mf-line:#e4e9f1;      /* hairlines            */
  --mf-radius:14px;
  --mf-shadow:0 6px 24px rgba(19,34,63,.08);
  --mf-shadow-sm:0 2px 10px rgba(19,34,63,.06);
}

/* ---------------- base ---------------- */
html body#avatar-template, body{
  background:var(--mf-bg)!important; color:var(--mf-ink)!important;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif!important;
  line-height:1.7!important; -webkit-font-smoothing:antialiased;
}
#avatar-template p, #avatar-template li, #avatar-template td, #avatar-template dd{
  color:var(--mf-ink)!important; font-size:15.5px!important;
}
#avatar-template h1,#avatar-template h2,#avatar-template h3,#avatar-template h4,#avatar-template h5{
  font-family:'Space Grotesk','Inter',sans-serif!important; color:var(--mf-navy)!important;
  font-weight:700!important; letter-spacing:-.015em!important; line-height:1.2!important; text-shadow:none!important;
}
#avatar-template h1{ font-size:2rem!important; }
#avatar-template h2{ font-size:1.55rem!important; }
#avatar-template h3{ font-size:1.22rem!important; }
#avatar-template a{ color:var(--mf-accent)!important; text-decoration:none; transition:color .15s; }
#avatar-template a:hover{ color:var(--mf-accent2)!important; }
#avatar-template img{ border-radius:10px!important; max-width:100%!important; height:auto!important; }
/* template hard-codes capability/partner photos to inline width:100px -> tiny.
   `!important` beats the inline rule; keep aspect ratio (height:auto). */
#avatar-template .partners img, #avatar-template .item-page img[style*="width: 100px"],
#avatar-template .item-page img[style*="width:100px"]{
  width:190px!important; max-width:100%!important; height:auto!important;
  border:1px solid var(--mf-line)!important; border-radius:10px!important; }
#avatar-template hr{ border:0!important; border-top:1px solid var(--mf-line)!important; margin:22px 0!important; }

/* ---------------- header ---------------- */
/* un-fix: template pins #avatar-header-inside-block as position:fixed (z 9999999),
   which overlapped the hero. Make it a normal in-flow bar. */
#avatar-header, #avatar-header-block, #avatar-header-inside-block{
  position:static!important; top:auto!important; left:auto!important; width:auto!important;
  background:var(--mf-panel)!important; box-shadow:0 1px 0 var(--mf-line), 0 6px 20px rgba(19,34,63,.05)!important;
  border-bottom:3px solid var(--mf-accent)!important;
}
#avatar-header-inside-block{ padding:10px 0!important; }
.st-logo, .customst-logo, .logo, #avatar-pos-logo img{ filter:none!important; }
/* logo is a 320x90 image -> huge header + overflow; cap it */
#avatar-pos-top-left img, .customst-logo img, .logo img, .st-logo img{ max-height:46px!important; width:auto!important; height:auto!important; }
@media(max-width:1119px){ #avatar-pos-top-left img, .logo img{ max-height:40px!important; } }

/* ---------------- main menu ---------------- */
.avatar-main-menu, .st-main-menu, .st_menu, #avatar-pos-top-right, #avatar-pos-top-left{ background:transparent!important; }
.avatar-nav-responsive{ background:transparent!important; }
.st-module-content{ background:transparent!important; }
/* link typography + colour (all widths) */
ul.st-main-menu>li, ul.avatar-main-menu>li{ position:relative!important; padding-top:0!important; padding-bottom:0!important; vertical-align:middle!important; border:0!important; }
ul.st-main-menu>li>span.pull, ul.avatar-main-menu>li>span.pull{ display:none!important; }
ul.st-main-menu>li>a, ul.avatar-main-menu>li>a, .st-mega-menu>li>a{
  color:var(--mf-navy)!important; font-weight:600!important; text-transform:uppercase!important;
  letter-spacing:.03em!important; font-size:12.5px!important; padding:10px 12px!important;
  border:0!important; background:transparent!important; box-shadow:none!important; position:relative;
}
ul.st-main-menu>li>a:hover, ul.avatar-main-menu>li>a:hover,
ul.st-main-menu>li.active>a, ul.st-main-menu>li:hover>a, ul.st-main-menu>li.current>a{ color:var(--mf-accent)!important; }
ul.st-main-menu .st-mega-menu-row .title a{
  display:block!important; padding:9px 12px!important; border-radius:8px!important; color:var(--mf-ink)!important;
  text-transform:none!important; letter-spacing:0!important; font-size:13.5px!important; font-weight:500!important; }
ul.st-main-menu .st-mega-menu-row .title a:hover{ background:var(--mf-bg)!important; color:var(--mf-accent)!important; }
ul.st-main-menu .st-mega-menu-row .title a:after{ display:none!important; }

/* ===== DESKTOP (>=980px): logo+nav centred as one group, single-row menu, hover dropdowns ===== */
@media(min-width:1120px){
  #avatar-header-inside-block .avatar-wrapper{ display:flex!important; align-items:center!important; justify-content:center!important; gap:22px!important; }
  #avatar-header-inside-block .avatar-wrapper>.clearbreak{ display:none!important; }
  #avatar-pos-top-left, #avatar-pos-top-right{ float:none!important; width:auto!important; flex:0 0 auto!important; }
  ul.st-main-menu, ul.avatar-main-menu{
    display:flex!important; flex-wrap:nowrap!important; align-items:center!important; justify-content:center!important;
    gap:0!important; white-space:nowrap!important; width:auto!important; float:none!important; }
  ul.st-main-menu>li, ul.avatar-main-menu>li{ flex:0 0 auto!important; margin:0!important; }
  ul.st-main-menu>li>a, ul.avatar-main-menu>li>a{ padding:9px 11px!important; font-size:11.5px!important; letter-spacing:.02em!important; margin:0!important; }
  ul.st-main-menu>li>a:after, ul.avatar-main-menu>li>a:after{ left:11px!important; right:11px!important; }
  ul.st-main-menu>li>a:after, ul.avatar-main-menu>li>a:after{
    content:""; position:absolute; left:15px; right:15px; bottom:6px; height:2px;
    background:var(--mf-accent); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .22s; }
  ul.st-main-menu>li:hover>a:after, ul.st-main-menu>li.active>a:after, ul.st-main-menu>li.current>a:after{ transform:scaleX(1); }
  /* collapse inline mega panels into hover dropdowns */
  ul.st-main-menu .st-mega-menu-row, ul.avatar-main-menu .st-mega-menu-row{
    position:absolute!important; top:100%!important; left:0!important; display:none!important;
    min-width:240px!important; max-width:420px!important; margin-top:6px!important;
    background:var(--mf-panel)!important; border:1px solid var(--mf-line)!important;
    border-radius:12px!important; box-shadow:var(--mf-shadow)!important; padding:8px!important;
    z-index:1000!important; text-align:left!important; }
  ul.st-main-menu>li:hover>.st-mega-menu-row, ul.avatar-main-menu>li:hover>.st-mega-menu-row{ display:block!important; }
  ul.st-main-menu .st-mega-menu-row .row-fluid, ul.st-main-menu .st-mega-menu-row .st-mega-menu-col{ width:auto!important; margin:0!important; display:block!important; }
  ul.st-main-menu .st-mega-menu-row ul{ list-style:none!important; margin:0!important; padding:0!important; }
  ul.st-main-menu .st-mega-menu-row .title{ margin:0!important; }
  ul.st-main-menu .st-mega-menu-row .title a{ white-space:nowrap!important; }
  span.toggle, .avatar-nav-responsive .toggle, .avatar-responsive>.toggle{ display:none!important; }
}

/* ===== MOBILE (<980px): own toggle drives a full-width drop panel ===== */
@media(max-width:1119px){
  .avatar-nav-responsive .toggle, .avatar-responsive .toggle, span.toggle{
    position:relative!important; background:var(--mf-accent)!important; color:#fff!important; border-radius:9px!important;
    width:46px!important; height:40px!important; cursor:pointer!important;
    display:inline-flex!important; align-items:center!important; justify-content:center!important; font-size:0!important; }
  /* CSS hamburger (3 bars) — reliable, no font glyph dependency */
  .avatar-nav-responsive .toggle:before, .avatar-responsive .toggle:before, span.toggle:before{
    content:""!important; width:20px!important; height:2px!important; background:#fff!important; border-radius:2px!important;
    box-shadow:0 -6px 0 #fff, 0 6px 0 #fff!important; transition:transform .2s, box-shadow .2s!important; }
  .avatar-nav-responsive .toggle:after, .avatar-responsive .toggle:after, span.toggle:after{
    content:""!important; position:absolute!important; width:20px!important; height:2px!important; background:#fff!important;
    border-radius:2px!important; opacity:0!important; transition:transform .2s, opacity .2s!important; }
  /* open -> X */
  .toggle.mf-open:before{ box-shadow:0 0 0 #fff!important; transform:rotate(45deg)!important; }
  .toggle.mf-open:after{ opacity:1!important; transform:rotate(-45deg)!important; }
  /* menu hidden until opened */
  ul.st-main-menu, ul.avatar-main-menu{
    display:none!important; position:static!important; float:none!important; width:100%!important; clear:both!important;
    background:var(--mf-panel)!important; border:1px solid var(--mf-line)!important; border-radius:12px!important;
    margin:10px 0 4px!important; box-shadow:var(--mf-shadow)!important; overflow:hidden!important; }
  ul.st-main-menu.mf-open, ul.avatar-main-menu.mf-open{ display:block!important; }
  ul.st-main-menu>li, ul.avatar-main-menu>li{ display:block!important; width:100%!important; text-align:left!important;
    border:0!important; border-top:1px solid var(--mf-line)!important; }
  ul.st-main-menu>li:first-child{ border-top:0!important; }
  ul.st-main-menu>li>a, ul.avatar-main-menu>li>a{ display:block!important; padding:13px 16px!important; font-size:13.5px!important; text-align:left!important; }
  /* submenus: static indented list (hover is useless on touch) */
  ul.st-main-menu .st-mega-menu-row{
    position:static!important; display:block!important; box-shadow:none!important; border:0!important;
    background:transparent!important; padding:0 0 8px 14px!important; margin:0!important; max-width:none!important; }
  ul.st-main-menu .st-mega-menu-row .title a{ padding:8px 16px!important; font-size:13px!important; color:var(--mf-muted)!important; text-transform:none!important; }
}

/* ---------------- hero (HOME ONLY) ----------------
   #avatar-body-middle-block is the shared main wrapper: on the homepage it
   holds the banner module; on inner pages it holds the article. So every
   hero rule is scoped to body.home-page, otherwise inner-page content
   (which lives in #avatar-pos-main-body) would be painted navy / hidden. */
#twitter_slider{ display:none!important; }
/* 11px "expand" list-bullet icons got swapped for stock photos -> ugly specks; drop them */
#avatar-template img[alt="expand"]{ display:none!important; }
body.home-page #avatar-body-middle-block{
  background:
    radial-gradient(900px 340px at 78% -10%, rgba(23,182,230,.30), transparent 60%),
    linear-gradient(118deg, var(--mf-navy) 0%, var(--mf-navy2) 58%, #0d5f8f 100%)!important;
  position:relative!important; overflow:hidden!important;
  min-height:0!important; max-height:none!important; margin:0 0 34px 0!important;
  padding:66px 20px 70px!important; display:block!important;
}
/* faint dot grid texture */
body.home-page #avatar-body-middle-block:before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:22px 22px; opacity:.6;
}
body.home-page #avatar-body-middle-block .avatar-wrapper{ position:relative; z-index:1; }
/* neutralise template positioning / clipping inside hero */
body.home-page #avatar-body-middle-block #avatar-content,
body.home-page #avatar-body-middle-block #avatar-main-content,
body.home-page #avatar-body-middle-block #avatar-main-content-inner,
body.home-page #avatar-body-middle-block #avatar-pos-banner-top,
body.home-page #avatar-body-middle-block .st-module-content,
body.home-page #avatar-body-middle-block .customst_wearevela{
  background:transparent!important; box-shadow:none!important; border:0!important;
  padding:0!important; margin:0!important; position:static!important; transform:none!important; float:none!important;
  min-height:0!important; max-height:none!important; overflow:visible!important;
}
/* hide the empty featured-blog slot that padded the hero */
body.home-page #avatar-body-middle-block #avatar-pos-main-body,
body.home-page #avatar-body-middle-block .blog-featuredst-menu-home{ display:none!important; }
/* hero text */
body.home-page #avatar-body-middle-block .customst_wearevela .title,
body.home-page #avatar-body-middle-block .customst_wearevela .title .text{
  display:block!important; margin:0 auto 14px!important; color:#ffffff!important;
  font-family:'Space Grotesk','Inter',sans-serif!important; font-weight:700!important;
  font-size:3rem!important; line-height:1.08!important; letter-spacing:-.02em!important; text-align:center!important; text-shadow:none!important;
}
body.home-page #avatar-body-middle-block .intro{ max-width:760px; margin:0 auto!important; }
body.home-page #avatar-body-middle-block .intro p{
  color:#d7e8f6!important; font-size:18px!important; line-height:1.6!important;
  margin:0 auto!important; text-align:center!important; font-weight:400!important;
}
body.home-page #avatar-body-middle-block h1, body.home-page #avatar-body-middle-block h2{ color:#fff!important; }

/* ---------------- content area ---------------- */
#avatar-content, #avatar-main-content, #avatar-main-content-inner, #avatar-full-2-block, #avatar-full-3-block{ background:transparent!important; }
/* template pins .avatar-wrapper to a fixed 1240px -> overflow below 1240vw; force it responsive */
#avatar-template .avatar-wrapper, #avatar-template .avatar-wrapper.block-default-width{
  width:100%!important; max-width:1240px!important; min-width:0!important;
  margin-left:auto!important; margin-right:auto!important; padding-left:18px!important; padding-right:18px!important; box-sizing:border-box!important; }
/* inner pages: give the content block breathing room from header & footer */
body:not(.home-page) #avatar-body-middle-block{ padding:36px 0 14px!important; }
/* page card */
.item-page, .blog, .blog-featured, #avatar-full-3-block .customst-about-us,
#avatar-main-content-inner .st-module.content, #avatar-content .st-article{
  background:var(--mf-panel)!important; border:1px solid var(--mf-line)!important;
  border-radius:var(--mf-radius)!important; padding:30px 34px!important; margin:0 0 26px 0!important;
  box-shadow:var(--mf-shadow)!important;
}
#avatar-full-3-block{ margin-top:-6px; }
.page-header{
  background:none!important; border:0!important; border-bottom:2px solid var(--mf-line)!important;
  padding:0 0 12px 0!important; margin:0 0 22px 0!important; text-align:left!important; position:relative;
}
.page-header:after{ content:""; position:absolute; left:0; bottom:-2px; width:64px; height:2px; background:var(--mf-accent); }
.page-header h1,.page-header h2{ margin:0!important; }
.st-module-heading, #avatar-full-2-block .st-module-heading{
  background:none!important; color:var(--mf-navy)!important; padding:4px 0 10px!important;
  border-bottom:1px solid var(--mf-line)!important; margin-bottom:16px!important;
}
.items-row, .items-leading{ margin-bottom:0!important; }

/* ---------------- buttons / forms ---------------- */
#avatar-template .btn, #avatar-template button, #avatar-template input[type="submit"],
#avatar-template input[type="button"], #avatar-template .readmore a, #avatar-template a.readon,
#avatar-template a.btn, .cookiebuttons .btn{
  display:inline-block!important; background:var(--mf-accent)!important; background-image:none!important;
  color:#fff!important; border:0!important; border-radius:10px!important; padding:10px 20px!important;
  font-weight:600!important; font-size:14px!important; line-height:1.3!important; cursor:pointer!important;
  box-shadow:0 4px 12px rgba(10,132,196,.28)!important; text-shadow:none!important; text-transform:none!important;
  transition:background .15s, transform .05s, box-shadow .15s;
}
#avatar-template .btn:hover, #avatar-template button:hover, #avatar-template input[type="submit"]:hover,
#avatar-template .readmore a:hover, #avatar-template a.readon:hover, .cookiebuttons .btn:hover{
  background:var(--mf-navy)!important; color:#fff!important; box-shadow:0 6px 16px rgba(19,34,63,.3)!important;
}
#avatar-template .btn:active, .cookiebuttons .btn:active{ transform:translateY(1px); }
/* secondary / ghost (e.g. "decline") */
.cookiebuttons a#cookiehintsubmitno{ background:transparent!important; color:#cdd8e6!important;
  box-shadow:none!important; border:1px solid rgba(255,255,255,.3)!important; }
.cookiebuttons a#cookiehintsubmitno:hover{ background:rgba(255,255,255,.08)!important; color:#fff!important; }
#avatar-template input[type="text"],#avatar-template input[type="email"],
#avatar-template input[type="password"],#avatar-template textarea,#avatar-template select{
  border:1px solid var(--mf-line)!important; border-radius:10px!important; padding:11px 13px!important;
  background:#fff!important; color:var(--mf-ink)!important; font-family:inherit!important;
}
#avatar-template input:focus,#avatar-template textarea:focus,#avatar-template select:focus{
  outline:0!important; border-color:var(--mf-accent)!important; box-shadow:0 0 0 3px rgba(10,132,196,.15)!important;
}

/* ---------------- footer ---------------- */
#avatar-footer, #avatar-footer-block, #avatar-template-copyright, #avatar-pos-footer, #avatar-bottom{
  background:var(--mf-navy)!important; color:#c6d3e4!important;
}
#avatar-footer-block{ margin-top:36px!important; padding:8px 0!important; }
#avatar-template-copyright, #avatar-template-copyright *{ color:#9fb2cc!important; }
#avatar-footer a, #avatar-pos-footer a, #avatar-bottom a, #avatar-template-copyright a, #avatar-footer-block a{ color:#8fd6f3!important; }
#avatar-footer a:hover, #avatar-footer-block a:hover, #avatar-template-copyright a:hover{ color:#bfe9ff!important; }
/* body `p` rule (ink) bled dark-on-dark onto footer text like "© MicroField" */
#avatar-footer-block p, #avatar-footer-block span, #avatar-footer-block li, #avatar-footer-block td, #avatar-footer-block div,
#avatar-pos-footer p, #avatar-pos-footer span, #avatar-bottom p, #avatar-bottom span{ color:#c6d3e4!important; }
#avatar-pos-footer h1,#avatar-pos-footer h2,#avatar-pos-footer h3,#avatar-bottom h3,#avatar-footer-block h3{ color:#fff!important; }
/* secondary footer "about" band: template paints it dark grey with dark text
   (unreadable). Make it navy with light text so it reads and joins the footer. */
#avatar-footer-number{ background:var(--mf-navy)!important; color:#c6d3e4!important; padding:30px 0!important; }
#avatar-footer-number p, #avatar-footer-number span, #avatar-footer-number li, #avatar-footer-number div{ color:#c6d3e4!important; }
#avatar-footer-number h1, #avatar-footer-number h2, #avatar-footer-number h3, #avatar-footer-number .project-colored{ color:#8fd6f3!important; }
#avatar-footer-number a{ color:#8fd6f3!important; }

/* ---------------- original brand colour cleanup ----------------
   template.css paints .project-colored with the old brand red (#9E0016),
   which blends on dark panels; repaint with our accent. */
#avatar-template .project-colored, #avatar-template .project_color, #avatar-template .project-color{ color:var(--mf-accent)!important; }

/* ---------------- go-to-top ---------------- */
/* arrow glyph (template fill wiped the icon) + pulled off the edge +
   hidden until scrolled (toggled by a tiny inline script -> .mf-show). */
#avatar-go-to-top{ background:var(--mf-accent)!important; border-radius:12px!important; color:#fff!important;
  box-shadow:0 6px 18px rgba(10,132,196,.45)!important; border:0!important; width:46px!important; height:46px!important;
  right:26px!important; bottom:26px!important; left:auto!important; position:fixed!important; z-index:9998!important;
  display:flex!important; align-items:center!important; justify-content:center!important; font-size:0!important; overflow:hidden!important;
  opacity:0!important; visibility:hidden!important; transform:translateY(10px); pointer-events:none!important;
  transition:opacity .25s ease, transform .25s ease, background .15s!important; }
#avatar-go-to-top.mf-show{ opacity:1!important; visibility:visible!important; transform:translateY(0)!important; pointer-events:auto!important; }
#avatar-go-to-top:before{ content:"\2191"!important; font-family:'Inter',sans-serif!important; font-size:22px!important;
  font-weight:700!important; line-height:1!important; color:#fff!important; }
#avatar-go-to-top:hover{ background:var(--mf-navy)!important; }
@media(max-width:600px){ #avatar-go-to-top{ right:16px!important; bottom:16px!important; width:42px!important; height:42px!important; } }

/* ---------------- cookie hint ---------------- */
/* cookie bar: broken, re-appears on every page, pure clutter on a mirror.
   Remove it entirely — no consent tracking here to preserve. */
#redim-cookiehint-bottom, #redim-cookiehint, #redim-cookiehint-top{ display:none!important; }

/* ---------------- hide template demo cruft ---------------- */
#avatar-settings{ display:none!important; }