/* Base reset and typography (scoped via .eta- prefix where possible) */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body { margin: 0; font-family: var(--eta-font-sans); font-size: var(--eta-type-body); line-height: 1.5; color: var(--eta-color-text-high); background: var(--eta-color-bg); }

.eta-shell { min-height: 100dvh; display: flex; flex-direction: column; }
.eta-shell__header, .eta-shell__footer { background: var(--eta-color-surface); border-color: var(--eta-color-border); }
.eta-shell__main { flex: 1 1 auto; }

.eta-header__inner, .eta-footer__inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--eta-space-5); }
.eta-header { position: sticky; top: 0; z-index: var(--eta-z-header); border-bottom: 1px solid var(--eta-color-border); }
.eta-footer { border-top: 1px solid var(--eta-color-border); }

.eta-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 64px; }
.eta-header__brand { justify-self: start; }
.eta-header__nav { justify-self: center; }
.eta-header__account { justify-self: end; position: relative; }

.eta-brand { display: inline-flex; align-items: center; gap: var(--eta-space-2); color: inherit; text-decoration: none; }
.eta-brand__logo { width: 24px; height: 24px; background: var(--eta-color-accent); border-radius: 4px; }
.eta-brand__wordmark { font-weight: 700; letter-spacing: 0.02em; }

.eta-nav { display: flex; align-items: center; }
.eta-nav__toggle { display: none; }
.eta-nav__list { display: flex; gap: var(--eta-space-4); list-style: none; margin: 0; padding: 0; }
.eta-nav__list a { color: inherit; text-decoration: none; padding: var(--eta-space-2) var(--eta-space-3); border-radius: var(--eta-radius-md); }
.eta-nav__list .current-menu-item > a,
.eta-nav__list .current_page_item > a,
.eta-nav__list a[aria-current="page"] {
  background: transparent;
  border-bottom: 2px solid var(--eta-color-accent);
}

.eta-account__button { display: inline-flex; align-items: center; gap: var(--eta-space-2); background: transparent; color: inherit; border: 1px solid var(--eta-color-border); border-radius: var(--eta-radius-md); padding: var(--eta-space-2) var(--eta-space-3); cursor: pointer; }
.eta-account__avatar { width: 24px; height: 24px; background: rgba(255,255,255,0.2); border-radius: 999px; }
.eta-account__menu { position: absolute; right: 0; top: calc(100% + 8px); background: var(--eta-color-surface); border: 1px solid var(--eta-color-border); border-radius: var(--eta-radius-md); min-width: 200px; padding: var(--eta-space-2) 0; }
.eta-account__link { display: block; padding: var(--eta-space-2) var(--eta-space-4); color: inherit; text-decoration: none; }
.eta-account__link:hover { background: rgba(255,255,255,0.06); }

/* Titles & typography scale */
.eta-title { font-size: var(--eta-type-h1); font-weight: 600; margin: 0 0 var(--eta-space-5); }

@media (max-width: 900px) {
  .eta-header__inner { grid-template-columns: 1fr auto auto; }
  .eta-nav__toggle { display: inline-flex; align-items: center; gap: var(--eta-space-2); background: transparent; color: inherit; border: 1px solid var(--eta-color-border); border-radius: var(--eta-radius-md); padding: var(--eta-space-2) var(--eta-space-3); margin-right: var(--eta-space-3); }
  .eta-nav__list { display: none; position: absolute; left: var(--eta-space-5); right: var(--eta-space-5); top: 64px; background: var(--eta-color-surface); border: 1px solid var(--eta-color-border); border-radius: var(--eta-radius-md); padding: var(--eta-space-3); flex-direction: column; gap: var(--eta-space-2); }
  .eta-nav[aria-expanded="true"] .eta-nav__list { display: flex; }
}