/**
 * Site Content Component
 * Main content area wrapper with slot for page content
 */
class SiteContent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.render();
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          flex: 1;
          min-height: 0;
        }

        .content {
          padding: var(--spacing-md, 1rem);
        }
      </style>
      <main class="content">
        <slot></slot>
      </main>
    `;
  }
}

customElements.define('site-content', SiteContent);