/* Emkan Futures — site chrome: header/nav, footer, hero, page-level layout.
   Component-level styling lives in components.css; this file is the
   "how pages are assembled" layer. */

.emkan-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg-page);
  border-bottom: 1px solid var(--border-subtle);
}
.emkan-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  gap: var(--space-5);
}
.emkan-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.emkan-brand img {
  height: 34px;
  width: auto;
}
.emkan-brand-wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: 0.6rem;
  letter-spacing: var(--ls-wordmark);
  text-transform: uppercase;
  color: var(--text-title);
}
.emkan-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.emkan-nav a {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  color: var(--text-body);
  font-size: var(--fs-sm);
}
.emkan-nav a.is-active,
.emkan-nav a:hover {
  color: var(--brand-primary);
}
.emkan-nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
}
.emkan-nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-title);
  margin: 4px 0;
}

/* Header CTA reads as an outline against the page background instead of
   a solid white label, per brand request -- scoped to the header only so
   the primary button elsewhere on the site keeps its normal white text. */
.emkan-header .emkan-btn--primary {
  color: var(--bg-page);
}
.emkan-header .emkan-btn--primary:hover {
  color: var(--bg-page);
}

@media (max-width: 780px) {
  .emkan-nav-toggle { display: block; }
  .emkan-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-page);
    border-bottom: 1px solid var(--border-subtle);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-4);
    display: none;
  }
  .emkan-nav.is-open { display: flex; }
  .emkan-nav .emkan-btn { align-self: flex-start; }
}

/* ---- Hero ---------------------------------------------------------- */
.emkan-hero {
  padding: var(--space-10) 0 var(--space-8);
}
.emkan-hero h1 {
  font-size: var(--fs-display);
  max-width: 14ch;
}
.emkan-hero .emkan-lead {
  font-size: var(--fs-lead);
  color: var(--text-body);
  max-width: 60ch;
  margin: var(--space-4) 0 var(--space-6);
}
.emkan-hero-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ---- Page header (non-home pages) ----------------------------------- */
.emkan-page-header {
  padding: var(--space-9) 0 var(--space-7);
}
.emkan-page-header h1 {
  font-size: var(--fs-h1);
  max-width: 20ch;
}
.emkan-page-header .emkan-lead {
  font-size: var(--fs-lead);
  color: var(--text-body);
  max-width: 60ch;
  margin-top: var(--space-3);
}

/* ---- Footer ----------------------------------------------------------- */
.emkan-footer {
  background: var(--bg-inverse-deep);
  color: var(--text-on-ink);
  padding: var(--space-8) 0;
  margin-top: var(--space-10);
}
.emkan-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.emkan-footer a {
  color: var(--text-on-ink);
}
.emkan-footer small {
  color: var(--ink-300);
  font-size: var(--fs-xs);
}

/* ---- Utility grids -------------------------------------------------- */
.emkan-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 860px) {
  .emkan-two-col { grid-template-columns: 1fr; }
}