/**
 * Main Stylesheet
 * k8s Cluster Documentation
 * 
 * Import order is important:
 * 1. Variables (CSS custom properties)
 * 2. Reset (normalize & reset styles)
 * 3. Typography (text styles)
 * 4. Layout (page structure)
 * 5. Components (UI components)
 */

@import url("variables.css");
@import url("reset.css");
@import url("typography.css");
@import url("layout.css");
@import url("components.css");

/**
 * Fonts
 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Noto+Sans+JP:wght@400;500;700&display=swap");

/**
 * Global Styles
 */

html {
  font-size: 16px;
}

body {
  overflow-x: hidden;
}

/* ================================================
   Utility Classes
   ================================================ */

/* Display */
.hidden {
  display: none !important;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.grid {
  display: grid;
}

/* Spacing */
.m-0 {
  margin: 0;
}
.m-1 {
  margin: var(--space-1);
}
.m-2 {
  margin: var(--space-2);
}
.m-3 {
  margin: var(--space-3);
}
.m-4 {
  margin: var(--space-4);
}
.m-6 {
  margin: var(--space-6);
}
.m-8 {
  margin: var(--space-8);
}

.mt-0 {
  margin-top: 0;
}
.mt-1 {
  margin-top: var(--space-1);
}
.mt-2 {
  margin-top: var(--space-2);
}
.mt-3 {
  margin-top: var(--space-3);
}
.mt-4 {
  margin-top: var(--space-4);
}
.mt-6 {
  margin-top: var(--space-6);
}
.mt-8 {
  margin-top: var(--space-8);
}

.mb-0 {
  margin-bottom: 0;
}
.mb-1 {
  margin-bottom: var(--space-1);
}
.mb-2 {
  margin-bottom: var(--space-2);
}
.mb-3 {
  margin-bottom: var(--space-3);
}
.mb-4 {
  margin-bottom: var(--space-4);
}
.mb-6 {
  margin-bottom: var(--space-6);
}
.mb-8 {
  margin-bottom: var(--space-8);
}

.p-0 {
  padding: 0;
}
.p-1 {
  padding: var(--space-1);
}
.p-2 {
  padding: var(--space-2);
}
.p-3 {
  padding: var(--space-3);
}
.p-4 {
  padding: var(--space-4);
}
.p-6 {
  padding: var(--space-6);
}
.p-8 {
  padding: var(--space-8);
}

/* Text Alignment */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

/* Flexbox Utilities */
.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-end {
  justify-content: flex-end;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.gap-1 {
  gap: var(--space-1);
}
.gap-2 {
  gap: var(--space-2);
}
.gap-3 {
  gap: var(--space-3);
}
.gap-4 {
  gap: var(--space-4);
}
.gap-6 {
  gap: var(--space-6);
}
.gap-8 {
  gap: var(--space-8);
}

/* Width */
.w-full {
  width: 100%;
}

.max-w-full {
  max-width: 100%;
}

/* Rounded */
.rounded {
  border-radius: var(--radius-md);
}

.rounded-lg {
  border-radius: var(--radius-lg);
}

.rounded-xl {
  border-radius: var(--radius-xl);
}

.rounded-full {
  border-radius: var(--radius-full);
}

/* Shadow */
.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow-md {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.shadow-xl {
  box-shadow: var(--shadow-xl);
}

/* Print Styles */
@media print {
  .site-header,
  .sidebar,
  .breadcrumb,
  .site-footer,
  .scroll-to-top,
  .theme-toggle,
  .mobile-menu-toggle {
    display: none !important;
  }

  .main-content {
    width: 100%;
    max-width: 100%;
  }

  .content-container {
    max-width: 100%;
    padding: 0;
  }

  .article-content {
    margin: 0;
  }

  a {
    text-decoration: underline;
  }

  pre {
    page-break-inside: avoid;
    border: 1px solid #ddd;
  }
}