/*
Theme Name:   errorHandle
Theme URI:    https://errorhandle.com
Description:  The errorHandle site. A child of Hello Elementor, so every page stays editable in Elementor while the chrome, typography and colour live here. Built for nonprofits and small teams who need IT to be somebody else's job.
Author:       errorHandle LLC
Author URI:   https://errorhandle.com
Template:     hello-elementor
Version:      1.0.0
License:      GPL-2.0-or-later
Text Domain:  errorhandle
*/

/* ------------------------------------------------------------------
   Tokens.

   The violet is the one from the logo - purple wordmark on black -
   rather than a stock blue, and the greys are biased toward it so
   they read as chosen instead of inherited. Light is the base; dark
   redefines only the tokens, so no component has a colour that only
   exists in one theme.
   ------------------------------------------------------------------ */
:root{
  --eh-ink:#15121F;
  --eh-soft:#4A4560;
  --eh-faint:#7B7694;
  --eh-paper:#FFFFFF;
  --eh-raised:#FAF9FD;
  --eh-line:#E7E3F0;
  --eh-violet:#5B3EE8;
  --eh-violet-soft:#F1EDFF;
  --eh-ok:#00714F;
  --eh-radius:12px;
  --eh-wrap:68rem;
  --eh-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --eh-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
/* No automatic dark mode.
   The chrome follows the OS, Elementor's content does not - it is light
   whatever the system says - so honouring prefers-color-scheme here
   produced a dark header sitting on a white page. Committing to one
   light world is the honest fix; a dark site would mean restyling every
   Elementor section too, which is the customer's editor to own. */


/* ------------------------------------------------------------------
   Base.

   Deliberately light-handed: Elementor owns the inside of every page,
   and a theme that restyles headings globally fights the editor for
   the rest of its life. This sets the ground, the type stack and the
   rhythm, then gets out of the way.
   ------------------------------------------------------------------ */
body{
  background:var(--eh-paper);
  color:var(--eh-ink);
  font-family:var(--eh-sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body a{color:var(--eh-violet)}
body a:hover{color:var(--eh-violet)}

h1,h2,h3,h4{
  color:var(--eh-ink);
  letter-spacing:-.028em;
  line-height:1.12;
  text-wrap:balance;
}
h1{font-size:clamp(2.1rem,6vw,3.5rem);font-weight:800}
h2{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:750}
h3{font-size:clamp(1.2rem,2.6vw,1.5rem);font-weight:700}
p{max-width:68ch}

:focus-visible{outline:2px solid var(--eh-violet);outline-offset:3px;border-radius:4px}

.eh-wrap{max-width:var(--eh-wrap);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)}

/* label/eyebrow - the mono face earns its place because the company is
   named after a programming term */
.eh-eyebrow{
  font:600 .72rem/1 var(--eh-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--eh-violet);
}

/* ------------------------------------------------------------------
   Header
   ------------------------------------------------------------------ */
.eh-head{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--eh-paper) 88%,transparent);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--eh-line);
}
.eh-head-in{
  display:flex;align-items:center;gap:1.2rem;
  min-height:4.2rem;
}
.eh-logo{
  font-weight:800;font-size:1.12rem;letter-spacing:-.025em;
  color:var(--eh-ink);text-decoration:none;white-space:nowrap;
}
.eh-logo:hover{color:var(--eh-ink)}
.eh-logo b{color:var(--eh-violet);font-weight:800}

.eh-nav{margin-left:auto;display:flex;align-items:center;gap:.3rem}
.eh-nav ul{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.eh-nav a{
  display:block;padding:.5rem .75rem;border-radius:8px;
  color:var(--eh-soft);text-decoration:none;font-size:.95rem;font-weight:550;
}
.eh-nav a:hover{color:var(--eh-ink);background:var(--eh-raised)}
.eh-nav .current-menu-item>a{color:var(--eh-ink)}

.eh-cta{
  display:inline-block;padding:.58rem 1.05rem;border-radius:9px;
  background:var(--eh-ink);color:var(--eh-paper)!important;
  font-weight:650;font-size:.94rem;text-decoration:none;white-space:nowrap;
}
.eh-cta:hover{background:var(--eh-violet);color:#fff!important}
.eh-signin{
  color:var(--eh-soft);text-decoration:none;font-weight:600;font-size:.94rem;
  padding:.5rem .6rem;border-radius:8px;
}
.eh-signin:hover{color:var(--eh-ink)}

/* mobile disclosure - a details element, so the menu works with no JS */
.eh-burger{margin-left:auto;display:none}
.eh-burger summary{
  list-style:none;cursor:pointer;padding:.5rem .7rem;border-radius:9px;
  border:1px solid var(--eh-line);font-size:.9rem;font-weight:650;color:var(--eh-ink);
}
.eh-burger summary::-webkit-details-marker{display:none}
.eh-burger[open] summary{background:var(--eh-raised)}
.eh-burger-panel{
  position:absolute;left:0;right:0;
  background:var(--eh-paper);border-bottom:1px solid var(--eh-line);
  padding:.6rem clamp(1.1rem,4vw,2rem) 1.1rem;
}
.eh-burger-panel ul{list-style:none;margin:0 0 .7rem;padding:0;display:flex;flex-direction:column}
.eh-burger-panel a{
  display:block;padding:.72rem .2rem;color:var(--eh-ink);text-decoration:none;
  font-size:1.02rem;font-weight:600;border-bottom:1px solid var(--eh-line);
}
.eh-burger-panel .eh-cta{display:block;text-align:center;margin-top:.8rem}

@media (max-width:860px){
  .eh-nav{display:none}
  .eh-burger{display:block}
}

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */
.eh-foot{
  margin-top:clamp(3rem,8vw,6rem);
  border-top:1px solid var(--eh-line);
  background:var(--eh-raised);
  padding:clamp(2.2rem,5vw,3.4rem) 0 2rem;
  font-size:.95rem;
}
.eh-foot-cols{
  display:grid;gap:clamp(1.6rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
}
.eh-foot h4{
  font:600 .72rem/1 var(--eh-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--eh-faint);margin:0 0 .9rem;
}
.eh-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.eh-foot a{color:var(--eh-soft);text-decoration:none}
.eh-foot a:hover{color:var(--eh-violet)}
.eh-foot p{color:var(--eh-soft);margin:0}
.eh-foot-base{
  margin-top:clamp(1.8rem,4vw,2.6rem);padding-top:1.3rem;
  border-top:1px solid var(--eh-line);
  display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center;
  color:var(--eh-faint);font-size:.86rem;
}
.eh-foot-base a{color:var(--eh-faint)}

/* ------------------------------------------------------------------
   Pages that are not built in Elementor - the portal, the automations
   page, legal text. They get readable defaults rather than nothing.
   ------------------------------------------------------------------ */
.eh-plain{padding:clamp(2rem,5vw,3.5rem) 0}
.eh-plain .entry-title{margin:0 0 1.4rem}
.eh-plain ul,.eh-plain ol{max-width:68ch}

@media (prefers-reduced-motion:no-preference){
  .eh-cta,.eh-nav a{transition:background .15s ease,color .15s ease}
}


/* ------------------------------------------------------------------
   Elementor widgets, in our colours.

   Elementor ships button "types" - success is green, info is blue -
   and left alone the page ends up with a traffic light where the
   calls to action should be.
   ------------------------------------------------------------------ */
.elementor-button,
.elementor-button-wrapper .elementor-button{
  background-color:var(--eh-ink);
  color:var(--eh-paper);
  border-radius:9px;
  font-weight:650;
  letter-spacing:0;
  padding:.85rem 1.4rem;
}
.elementor-button:hover,
.elementor-button-wrapper .elementor-button:hover{
  background-color:var(--eh-violet);
  color:#fff;
}
/* the second, quieter action */
.elementor-widget-button:nth-of-type(2) .elementor-button,
.elementor-button.elementor-size-md.elementor-button-info{
  background-color:transparent;
  color:var(--eh-ink);
  box-shadow:inset 0 0 0 1px var(--eh-line);
}
.elementor-widget-button:nth-of-type(2) .elementor-button:hover,
.elementor-button.elementor-size-md.elementor-button-info:hover{
  background-color:var(--eh-raised);
  color:var(--eh-violet);
  box-shadow:inset 0 0 0 1px var(--eh-violet);
}

/* The page title, which Hello prints above Elementor content and which
   every one of these pages already says in its own h1. */
.page .page-header,
.page .entry-header,
.page-header .entry-title{display:none}

/* The wordmark must not inherit link colour - it was coming out blue
   on the left and violet on the right. */
.eh-head .eh-logo,
.eh-head .eh-logo:link,
.eh-head .eh-logo:visited,
.eh-head .eh-logo:hover{color:var(--eh-ink);text-decoration:none}
.eh-head .eh-logo b{color:var(--eh-violet)}