/* ============================================================
   home.css — anonymous (logged-out) home page, "Frosted Evolution"
   Ported from the approved mockup design-mockups/direction-a-frosted-evolution.html.

   Every rule is scoped under body.gh-home — the class is added by
   Site.Master.vb ONLY for anonymous visitors on Default.aspx, so the
   logged-in home, the Account pages and the rest of the portal keep
   today's chrome untouched.

   Contract with Default.aspx.vb (LogIn handler writes these classes):
     .card.card-login        — normal login card
     .card.card-login.warn   — account locked out (amber accent bar)
     .card.card-login.err    — invalid credentials (red accent bar)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&display=swap');

body.gh-home{
  --ink:  #1d1d1b;
  --blue: #1d71b8;
  --cyan: #009fe3;
  --red:  #e2483d;
  --red-text: #c43a30;       /* darker red for 13px text: 5.2:1 on white */
  --amber:#e0950d;
  --muted: rgba(29,29,27,.62);
  --label: rgba(29,29,27,.72);
  --line:  rgba(29,113,184,.16);
  --soft:  rgba(29,113,184,.05);
  --dark: #13222e;
  --shadow: 0 16px 38px -20px rgba(0,0,0,.5);

  font-family:'Barlow',system-ui,sans-serif;
  color:var(--ink);
  background:none;                 /* replaces .body-content's fixed photo (broken on iOS) */
  margin-bottom:0;                 /* site.css reserves 110px for the old absolute footer — not needed */
  padding-bottom:0;                /* site.css's 15px would show the fixed bg below the in-flow footer */
  -webkit-tap-highlight-color:transparent;
}
body.gh-home ::selection{ background:rgba(0,159,227,.25); }

body.gh-home :focus-visible{
  outline:3px solid var(--cyan);
  outline-offset:2px;
  border-radius:6px;
}

/* ===== Background: Gheeraert brand-blue geometric facets (fixed layer, works on iOS unlike
   background-attachment:fixed). Clean brand slide with the logo/tagline removed, so the hero
   band stays the only brand lockup. ===== */
body.gh-home .gh-bg{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:-1;
  background:url('../images/bg-blue.jpg') center/cover no-repeat;
  transform:scale(1.03);            /* hides the blur's upscaling edge */
  filter:blur(.4px) saturate(1.02) brightness(1.1); /* lift the brand blue; facets stay crisp */
}
body.gh-home .gh-bg::after{
  content:""; position:absolute; top:0; right:0; bottom:0; left:0;
  /* gentle scrim, top & bottom only — just enough for navbar/footer contrast, kept light so the
     brand facets stay bright through the middle */
  background:
    linear-gradient(180deg, rgba(10,18,26,.30) 0%, rgba(10,18,26,0) 16%, rgba(10,18,26,0) 100%),
    linear-gradient(0deg,   rgba(10,18,26,.26) 0%, rgba(10,18,26,0) 52%);
}

body.gh-home .skip-link{
  position:absolute; left:16px; top:-48px; z-index:1050;
  background:var(--dark); color:#fff; font-weight:600; font-size:14px;
  padding:10px 16px; border-radius:0 0 9px 9px; text-decoration:none;
  transition:top .18s ease;
}
body.gh-home .skip-link:focus-visible{ top:0; }

/* ===== Top navbar: keep Bootstrap structure, restyle. The public front page keeps the brand-dark
   frosted bar on EVERY environment — the dev/uat/local navbar tint (site.css) is suppressed here.
   .navbar-inverse is included so these selectors match site.css's env-color specificity; home.css
   loads after site.css, so it wins the tie. ===== */
body.gh-home .navbar-inverse{
  background:rgba(15,27,37,.9);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-color:rgba(255,255,255,.08);
}
body.gh-home .navbar{ font-family:'Barlow',system-ui,sans-serif; }
body.gh-home .navbar-brand{ display:none; }   /* home icon is redundant on the home page itself */
body.gh-home .navbar-inverse .navbar-nav > li > a{
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.92);
  border-bottom:2px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
body.gh-home .navbar-inverse .navbar-nav > li > a:hover,
body.gh-home .navbar-inverse .navbar-nav > li > a:focus{
  color:#fff; background:transparent; border-bottom-color:var(--cyan);
}
/* LOG IN pill (the only navbar-right link in the anonymous template) */
body.gh-home .navbar-inverse .navbar-right > li > a{
  background:var(--cyan); color:#0d2231;
  font-weight:800; letter-spacing:.1em;
  border-radius:999px; border-bottom:0;
  padding:7px 16px; margin:8px 15px 0 0; min-height:0;
  transition:background .18s ease, transform .18s ease;
}
body.gh-home .navbar-inverse .navbar-right > li > a:hover,
body.gh-home .navbar-inverse .navbar-right > li > a:focus{
  background:#33b6ee; color:#0d2231; transform:translateY(-1px);
}
@media (max-width:767px){
  body.gh-home .navbar-right > li > a{ display:inline-block; margin:8px 12px; }
}

/* ===== Stage: centered hero in the visible viewport, flows + scrolls on short screens ===== */
body.gh-home .gh-stage{
  min-height:calc(100vh - 160px);   /* 50 navbar + bg-1/body paddings + 56 footer */
  display:flex; align-items:center; justify-content:center;
  padding:14px 4px;
}

/* One composed hero: brand band + frosted body + helper foot */
body.gh-home .hero{
  width:min(880px, 100%);
  border-radius:16px; overflow:hidden;
  border:1px solid rgba(255,255,255,.45);
  box-shadow:var(--shadow), 0 40px 90px -40px rgba(0,0,0,.5);
}

/* Brand lockup band — dark slate so the cyan slogan keeps contrast (5.4:1) */
body.gh-home .hero-band{
  display:flex; align-items:center; gap:18px;
  padding:16px 28px;
  background:rgba(19,34,46,.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
body.gh-home .hero-logo{
  height:34px; width:auto; display:block;
  filter:brightness(0) invert(1);   /* mono-white treatment on dark slate */
}
body.gh-home .band-divider{ width:1px; height:36px; background:rgba(255,255,255,.22); }
body.gh-home .band-text h1{
  margin:0; color:#fff;
  font-size:22px; font-weight:700; letter-spacing:-.01em; line-height:1.15;
}
body.gh-home .slogan{
  margin:3px 0 0; color:var(--cyan);
  font-size:10.5px; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
}

/* Frosted body — single transparency level; all text sits on solid white cards */
body.gh-home .hero-body{
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  padding:24px 24px 18px;
}
body.gh-home .card-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
  align-items:stretch;
}

/* ===== Cards ===== */
body.gh-home .card{
  position:relative;
  /* Equal-weight 50/50 cards: both carry the brand accent bar, painted as a layered background
     so the card's own border-radius clips it — a ::before strip can't match the corner curve */
  background:linear-gradient(90deg, var(--cyan), var(--blue)) top / 100% 4px no-repeat, #fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px;
  display:flex; flex-direction:column;
  box-shadow:0 10px 28px -22px rgba(19,34,46,.45);
}
/* Server-side login states (LogIn handler in Default.aspx.vb): accent bar recolors */
body.gh-home .card.err{  background-image:linear-gradient(90deg, var(--red),   #a3322a); }
body.gh-home .card.warn{ background-image:linear-gradient(90deg, var(--amber), #b97a0a); }

body.gh-home .card-head{ display:flex; align-items:center; gap:11px; margin-bottom:6px; }
body.gh-home .chip{
  width:36px; height:36px; flex:0 0 36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px;
}
body.gh-home .chip svg{ width:20px; height:20px; }
body.gh-home .chip-cyan{ background:rgba(0,159,227,.13); color:#0079ac; }
body.gh-home .chip-blue{ background:rgba(29,113,184,.1); color:var(--blue); }
body.gh-home .card h2{ margin:0; font-size:18px; font-weight:700; letter-spacing:-.01em; }
body.gh-home .card-sub{ margin:0 0 16px; font-size:13.5px; line-height:1.45; color:var(--muted); }

body.gh-home .card-form{ display:flex; flex-direction:column; flex:1; }
body.gh-home .form-fields{ display:flex; flex-direction:column; gap:15px; margin-bottom:18px; }

body.gh-home .lbl{
  display:block; margin:0 0 7px;
  font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--label);            /* 6.7:1 on white — readable, not 45%-alpha */
}
body.gh-home .lbl-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
body.gh-home .lbl-row .lbl{ margin-bottom:7px; }

body.gh-home .card input[type="text"],
body.gh-home .card input[type="email"],
body.gh-home .card input[type="password"]{
  width:100%; max-width:none;      /* site.css caps inputs at 350px — not here */
  height:46px;
  padding:11px 14px;
  font:inherit; font-size:16px;    /* 16px everywhere: no iOS zoom */
  color:var(--ink);
  background:#fff;
  border:1px solid rgba(29,113,184,.3);
  border-radius:9px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
body.gh-home .card input::placeholder{ color:rgba(29,29,27,.48); }
body.gh-home .card input:hover{ border-color:rgba(29,113,184,.5); }
body.gh-home .card input:focus-visible{ border-color:var(--cyan); }

body.gh-home .error{
  display:flex; gap:6px; align-items:flex-start;
  margin:7px 0 0; font-size:13px; line-height:1.4; font-weight:600;
  color:var(--red-text);
}
body.gh-home .error svg{ width:15px; height:15px; flex:0 0 15px; margin-top:1.5px; }
body.gh-home .error[hidden]{ display:none; }   /* display:flex above would defeat the hidden attribute */
body.gh-home .field.invalid input{ border-color:var(--red); }

body.gh-home .pw-wrap{ position:relative; }
body.gh-home .pw-wrap input{ padding-right:50px; }
body.gh-home .pw-toggle{
  position:absolute; top:1px; right:1px; bottom:1px;
  width:44px;                       /* >=44px touch target */
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer;
  color:var(--muted); border-radius:0 8px 8px 0;
  transition:color .18s ease, background .18s ease;
}
body.gh-home .pw-toggle:hover{ color:var(--blue); background:var(--soft); }
body.gh-home .pw-toggle svg{ width:20px; height:20px; }
body.gh-home .pw-toggle svg[hidden]{ display:none; }  /* inline SVG ignores the hidden attr without this */

body.gh-home .link{
  color:var(--blue); font-weight:600; text-decoration:none;
  text-underline-offset:3px; transition:color .18s ease;
}
body.gh-home .link:hover{ text-decoration:underline; color:#155b96; }
body.gh-home .link-sm{ font-size:12.5px; }

/* Buttons: --blue + white = 5.1:1. Brand cyan + white text fails AA (2.97:1),
   so cyan is used for accents/focus, blue/dark for action surfaces. */
body.gh-home .gh-btn{
  margin-top:auto;
  width:100%; min-height:48px;
  display:flex; align-items:center; justify-content:center; gap:9px;
  border:0; border-radius:9px; cursor:pointer;
  font:inherit; font-size:15.5px; font-weight:700; letter-spacing:.02em;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
body.gh-home .gh-btn svg{ width:17px; height:17px; }
body.gh-home .gh-btn-blue{ background:var(--blue); color:#fff; }
body.gh-home .gh-btn-blue:hover{
  background:#185f9e; transform:translateY(-1px);
  box-shadow:0 12px 24px -14px rgba(29,113,184,.9);
}
body.gh-home .gh-btn-blue:active{ transform:translateY(0); }
body.gh-home .gh-btn-dark{ background:var(--dark); color:#fff; }
body.gh-home .gh-btn-dark:hover{
  background:#1e3343; transform:translateY(-1px);
  box-shadow:0 12px 24px -14px rgba(19,34,46,.9);
}
body.gh-home .gh-btn-dark:active{ transform:translateY(0); }
body.gh-home .gh-btn[disabled]{ opacity:.75; cursor:default; transform:none; box-shadow:none; }

/* Shared helper foot inside the hero composition */
body.gh-home .hero-foot{
  margin-top:18px; padding-top:14px;
  border-top:1px solid var(--line);
  text-align:center;
  font-size:14px; color:rgba(29,29,27,.78);
}

/* ===== Footer: collapse the 134px two-tier stack into one compact dark bar, survives mobile =====
   Markup stays in Site.Master; the white logo strip is hidden and the legal bar is re-skinned. */
/* footer.footer-logo (0,2,2) outranks the mobile .footer re-show rule (0,2,1) below,
   so the white logo strip stays hidden at every width */
body.gh-home footer.footer-logo{ display:none; }
body.gh-home .footer{
  position:static;                 /* override site.css's desktop position:absolute (floated mid-page) */
  background:#0f1b25;
  border-top:1px solid rgba(255,255,255,.07);
  font-family:'Barlow',system-ui,sans-serif;
  min-height:48px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:4px 22px; padding:12px 20px;
  font-size:13px; line-height:1.5; color:rgba(255,255,255,.72); text-align:center;
}
body.gh-home .footer > div{ float:none; width:auto; margin:0; padding:0; }   /* flatten the col-sm-4 grid into one row */
body.gh-home .footer .pull-right{ float:none; padding:0; }                   /* TeamViewer link sits inline; wordmark dropped */
body.gh-home .footer a{
  color:rgba(255,255,255,.85); font-weight:500;
  text-underline-offset:3px; transition:color .18s ease;
}
body.gh-home .footer a:hover{ color:var(--cyan); text-decoration:underline; }

/* ===== Responsive ===== */
@media (max-width:960px){
  body.gh-home .card-grid{ grid-template-columns:1fr; }
  body.gh-home .hero{ width:min(620px, 100%); }
}
@media (max-width:767px){
  /* site.css hides .footer entirely below 768px — audited defect: the legal links and the
     brand mark must survive on mobile. Static flow, stacked columns. */
  body.gh-home{ margin-bottom:0; padding-bottom:0; }   /* site.css's 15px would show below the footer */
  /* The single WebForms <form> wraps the whole page — make it a flex column and let the content
     grow, so the static footer touches the bottom even when the content is shorter than the screen
     (fixed navbar and cookie bar are out of flow and unaffected). */
  body.gh-home form{
    min-height:calc(100vh - 50px);    /* 50px = body padding-top under the fixed navbar */
    min-height:calc(100dvh - 50px);
    display:flex; flex-direction:column;
  }
  body.gh-home form > .bg-1{ flex:1 0 auto; }
  body.gh-home .footer{
    display:block; visibility:visible;
    position:static; height:auto; line-height:1.7;
    padding:14px 16px; text-align:center;
  }
  /* the hero band already carries the brand on mobile; the footer wordmark just clips at the page edge */
  body.gh-home .footer .pull-right{ display:none; }
  /* keep the mobile footer to the essentials: legal links only, no copyright line */
  body.gh-home .footer > div:first-child{ display:none; }
}
@media (max-width:520px){
  body.gh-home .hero-band{ padding:13px 18px; gap:13px; }
  body.gh-home .hero-logo{ height:25px; }
  body.gh-home .band-divider{ height:28px; }
  body.gh-home .band-text h1{ font-size:17px; }
  body.gh-home .slogan{ font-size:8.5px; letter-spacing:.18em; }
  body.gh-home .hero-body{ padding:16px 14px 14px; }
  body.gh-home .card{ padding:18px 16px; }
  body.gh-home .hero-foot{ font-size:13.5px; }
}

@media (prefers-reduced-motion:reduce){
  body.gh-home *, body.gh-home *::before, body.gh-home *::after{ transition:none !important; }
}