/**
 * Site Content Component
 * Main content area wrapper with slot for page content
 * Uses flexbox with gap for consistent vertical spacing
 */
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 {
          display: flex;
          flex-direction: column;
          gap: var(--spacing-md, 16px);
          padding-top: var(--spacing-md, 16px);
          padding-bottom: var(--spacing-md, 16px);
        }

        /* Remove vertical padding from direct children to let gap handle spacing */
        ::slotted(.content-padding) {
          padding-top: 0 !important;
          padding-bottom: 0 !important;
        }

        ::slotted(.section) {
          padding-top: var(--spacing-md, 16px);
          padding-bottom: var(--spacing-md, 16px);
        }
      </style>
      <main class="content">
        <slot></slot>
      </main>
    `;
  }
}

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