/* ==========================================================================
   ECOSTEP CHROME
   Site-wide utility bar, header and footer for the Astra child theme.

   Two rules were followed throughout, both of them to avoid collisions with
   page content:

   1. Every selector is class based and namespaced .es-chrome. There are no
      bare element selectors here. Several Ecostep pages still carry their own
      `header{}`, `nav{}` and `footer{}` rules, and anything styled by element
      here would inherit whatever those pages happen to declare.

   2. The design tokens are declared on .es-chrome rather than :root. Page
      stylesheets declare the same token names on :root and on .es-pg, and
      scoping ours keeps the three sets completely independent. Changing a
      color here cannot reach into a page, and vice versa.
   ========================================================================== */

.es-chrome{
  --es-white:#FFFFFF;--es-bg:#F4F6F7;--es-bg-2:#E9EDEF;
  --es-ink:#10161B;--es-ink-2:#3D4952;--es-ink-3:#6B7780;
  --es-line:#DCE2E6;--es-line-2:#C4CDD3;
  --es-orange:#F0802C;--es-orange-ink:#B45E13;
  --es-graphite:#141A1F;
  --es-display:'Archivo',system-ui,-apple-system,sans-serif;
  --es-body:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --es-mono:'IBM Plex Mono',ui-monospace,monospace;
  --es-max:1240px;
}
.es-chrome,
.es-chrome *{box-sizing:border-box}
.es-chrome img{max-width:100%;height:auto;display:block}

.es-chrome-wrap{max-width:var(--es-max);margin:0 auto;padding:0 32px}

/* ---------- utility bar ---------- */
.es-chrome-util{background:var(--es-bg-2);border-bottom:1px solid var(--es-line)}
.es-chrome-util .es-chrome-wrap{display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding-top:9px;padding-bottom:9px;font-family:var(--es-mono);font-size:11.5px;letter-spacing:.07em;
  color:var(--es-ink-2);flex-wrap:wrap;line-height:1.5}
.es-chrome-util a{color:var(--es-ink);text-decoration:none;font-weight:500;font-family:var(--es-mono)}
.es-chrome-util a:hover{color:var(--es-orange-ink)}

/* ---------- header ---------- */
.es-chrome-header{background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--es-line);position:sticky;top:0;z-index:80}
.es-chrome-header .es-chrome-wrap{display:flex;align-items:center;gap:24px;
  padding-top:15px;padding-bottom:15px}

.es-chrome-brand{display:flex;align-items:center;flex-shrink:0;text-decoration:none;line-height:0}
.es-chrome-brand img{height:52px;width:auto;max-width:200px;object-fit:contain}
.es-chrome-word{font-family:var(--es-display);font-weight:800;font-size:22px;letter-spacing:.13em;
  color:var(--es-ink)}

.es-chrome-nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.es-chrome-nav a,
.es-chrome-drop>button{font-family:var(--es-body);font-size:14.5px;font-weight:500;color:var(--es-ink-2);
  text-decoration:none;padding:9px 11px;background:none;border:0;cursor:pointer;line-height:1.2;
  display:inline-flex;align-items:center;gap:6px;border-bottom:2px solid transparent}
.es-chrome-nav a:hover,
.es-chrome-drop>button:hover{color:var(--es-ink);border-bottom-color:var(--es-orange)}
.es-chrome-nav a.es-chrome-cta{background:var(--es-orange);color:#1A1005;font-weight:600;
  padding:11px 18px;border-bottom:0}
.es-chrome-nav a.es-chrome-cta:hover{background:#DA6F1D;color:#1A1005;border-bottom:0}

.es-chrome-toggle{display:none;background:none;border:1.5px solid var(--es-line-2);color:var(--es-ink);
  padding:10px 15px;font-family:var(--es-body);font-size:14px;font-weight:600;cursor:pointer;margin-left:auto}

/* ---------- dropdowns ---------- */
.es-chrome-drop{position:relative}
.es-chrome-drop>button svg{width:11px;height:11px;flex-shrink:0;transition:transform .18s ease}
.es-chrome-drop.open>button svg{transform:rotate(180deg)}
.es-chrome-menu{display:none;position:absolute;top:calc(100% + 9px);left:0;min-width:286px;
  background:var(--es-white);border:1px solid var(--es-line);
  box-shadow:0 18px 44px rgba(16,22,27,.14);padding:8px;z-index:90}
.es-chrome-drop.open .es-chrome-menu{display:block}
.es-chrome-menu a{display:block;padding:10px 13px;font-size:14.5px;color:var(--es-ink-2);
  text-decoration:none;line-height:1.35;border-bottom:0}
.es-chrome-menu a:hover{background:var(--es-bg);color:var(--es-ink);border-bottom:0}
.es-chrome-menu a span{display:block;font-family:var(--es-mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--es-ink-3);margin-top:3px}

/* ---------- footer ---------- */
.es-chrome-footer{background:var(--es-graphite);color:#94A0A9;font-family:var(--es-body);font-size:15px}
.es-chrome-footer .es-chrome-wrap{padding-top:58px;padding-bottom:28px}
.es-chrome-foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(auto-fit,minmax(148px,1fr));
  gap:40px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.13)}
.es-chrome-foot-grid>div{min-width:0}
.es-chrome-foot-logo{background:#fff;padding:13px 17px;display:inline-block;line-height:0}
.es-chrome-foot-logo img{height:56px;width:auto}
.es-chrome-blurb{margin:17px 0 0;max-width:36ch;line-height:1.55;color:#94A0A9}
.es-chrome-footer h4{font-family:var(--es-mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  color:#fff;margin:0 0 15px;font-weight:500}
.es-chrome-footer ul{list-style:none;padding:0;margin:0;line-height:2}
.es-chrome-footer li{color:#94A0A9}
.es-chrome-footer a{color:#94A0A9;text-decoration:none}
.es-chrome-footer a:hover{color:var(--es-orange)}
.es-chrome-foot-bottom{display:flex;justify-content:space-between;gap:18px;padding-top:24px;
  font-family:var(--es-mono);font-size:11px;letter-spacing:.09em;flex-wrap:wrap;color:#94A0A9}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .es-chrome-nav{display:none}
  .es-chrome-toggle{display:block}
  .es-chrome-nav.open{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;
    padding:8px 0 4px;margin-left:0;order:3;border-top:1px solid var(--es-line)}
  .es-chrome-nav.open>a,
  .es-chrome-nav.open .es-chrome-drop>button{padding:13px 0;border-bottom:1px solid var(--es-line);
    width:100%;justify-content:space-between;text-align:left}
  .es-chrome-nav.open a.es-chrome-cta{margin-top:13px;justify-content:center;border-bottom:0}
  .es-chrome-nav.open .es-chrome-drop{width:100%}
  .es-chrome-nav.open .es-chrome-menu{position:static;border:0;box-shadow:none;padding:0 0 10px 14px;
    min-width:0;background:var(--es-bg)}
  .es-chrome-header .es-chrome-wrap{flex-wrap:wrap}
}
@media(max-width:760px){
  .es-chrome-wrap{padding-left:22px;padding-right:22px}
  .es-chrome-brand img{height:42px}
  .es-chrome-util .es-chrome-wrap{flex-direction:column;align-items:flex-start;gap:5px}
  .es-chrome-foot-grid{grid-template-columns:1fr;gap:28px}
}

/* ==========================================================================
   SAFETY NET
   Astra's own header and footer are taken off their hooks in functions.php.
   These rules hide them as well, so that if a future Astra release renames a
   callback and the removal silently misses, the visitor still never sees two
   headers. Hiding is scoped to Astra's own container IDs and classes, so it
   cannot touch this theme's chrome or any page content.
   ========================================================================== */
body #masthead.site-header,
body .ast-above-header-wrap,
body .ast-main-header-wrap,
body .ast-below-header-wrap,
body #colophon.site-footer,
body .ast-footer-overlay{display:none !important}

/* Astra adds top padding to clear its sticky header; ours handles its own. */
body.ast-theme-transparent-header .site-content{padding-top:0}

/* ==========================================================================
   PAGE CONTENT
   Astra constrains content width by default. Plugin pages and the Elementor
   pages supply their own full-width layout, so the container padding is
   removed for them only.
   ========================================================================== */
.ast-page-builder-template .site-content > .ast-container,
.ast-page-builder-template .entry-content{max-width:none;padding-left:0;padding-right:0;margin:0}
.ast-page-builder-template .site-content{padding-top:0;padding-bottom:0}