/* ===== PLAYGIRLS THEME STYLES ===== */
/* Main stylesheet - Base layout and container system only */
/* Individual CSS files are enqueued via PHP for optimal HTTP/3 performance */

/* Base layout styles */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Main content should grow to push footer down */
.pg-main {
  flex: 1;
  padding-top: clamp(80px, 12vw, 120px);
}

/* Container system */
.pg-container {
  width: 100%;
  margin: 0 auto;
  padding-inline: var(--pg-container-padding);
}

.pg-container--xs { max-width: var(--pg-container-xs); }
.pg-container--sm { max-width: var(--pg-container-sm); }
.pg-container--md { max-width: var(--pg-container-md); }
.pg-container--lg { max-width: var(--pg-container-lg); }
.pg-container--xl { max-width: var(--pg-container-xl); }
.pg-container--2xl { max-width: var(--pg-container-2xl); }

/* Typography classes */
.pg-text--xs { font-size: var(--pg-text-xs); }
.pg-text--sm { font-size: var(--pg-text-sm); }
.pg-text--base { font-size: var(--pg-text-base); }
.pg-text--lg { font-size: var(--pg-text-lg); }
.pg-text--xl { font-size: var(--pg-text-xl); }
.pg-text--2xl { font-size: var(--pg-text-2xl); }
.pg-text--3xl { font-size: var(--pg-text-3xl); }
.pg-text--4xl { font-size: var(--pg-text-4xl); }
.pg-text--5xl { font-size: var(--pg-text-5xl); }

.pg-text--primary { color: var(--pg-text-primary); }
.pg-text--secondary { color: var(--pg-text-secondary); }
.pg-text--muted { color: var(--pg-text-muted); }
.pg-text--accent { color: var(--pg-primary); }

.pg-text--normal { font-weight: var(--pg-font-normal); }
.pg-text--medium { font-weight: var(--pg-font-medium); }
.pg-text--semibold { font-weight: var(--pg-font-semibold); }

/* Utility classes */
.pg-text-center { text-align: center; }
.pg-flex-center { display: flex; justify-content: center; }
.pg-mt-4 { margin-top: 1rem; }
.pg-text--bold { font-weight: var(--pg-font-bold); }

.pg-text--tight { line-height: var(--pg-leading-tight); }
.pg-text--normal { line-height: var(--pg-leading-normal); }
.pg-text--relaxed { line-height: var(--pg-leading-relaxed); }

/* Spacing utilities */
.pg-m-0 { margin: 0; }
.pg-m-1 { margin: var(--pg-space-1); }
.pg-m-2 { margin: var(--pg-space-2); }
.pg-m-3 { margin: var(--pg-space-3); }
.pg-m-4 { margin: var(--pg-space-4); }
.pg-m-5 { margin: var(--pg-space-5); }
.pg-m-6 { margin: var(--pg-space-6); }
.pg-m-8 { margin: var(--pg-space-8); }
.pg-m-10 { margin: var(--pg-space-10); }
.pg-m-12 { margin: var(--pg-space-12); }
.pg-m-16 { margin: var(--pg-space-16); }
.pg-m-20 { margin: var(--pg-space-20); }
.pg-m-24 { margin: var(--pg-space-24); }
.pg-m-32 { margin: var(--pg-space-32); }

.pg-p-0 { padding: 0; }
.pg-p-1 { padding: var(--pg-space-1); }
.pg-p-2 { padding: var(--pg-space-2); }
.pg-p-3 { padding: var(--pg-space-3); }
.pg-p-4 { padding: var(--pg-space-4); }
.pg-p-5 { padding: var(--pg-space-5); }
.pg-p-6 { padding: var(--pg-space-6); }
.pg-p-8 { padding: var(--pg-space-8); }
.pg-p-10 { padding: var(--pg-space-10); }
.pg-p-12 { padding: var(--pg-space-12); }
.pg-p-16 { padding: var(--pg-space-16); }
.pg-p-20 { padding: var(--pg-space-20); }
.pg-p-24 { padding: var(--pg-space-24); }
.pg-p-32 { padding: var(--pg-space-32); }

/* Display utilities */
.pg-hidden { display: none; }
.pg-block { display: block; }
.pg-inline { display: inline; }
.pg-inline-block { display: inline-block; }
.pg-flex { display: flex; }
.pg-grid { display: grid; }

/* Screen reader only */
.pg-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== ACCESSIBILITY ===== */

/* Skip link */
.pg-skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--pg-primary);
  color: white;
  padding: 8px 12px;
  text-decoration: none;
  border-radius: var(--pg-border-radius-sm);
  font-size: var(--pg-text-sm);
  font-weight: var(--pg-font-medium);
  z-index: var(--pg-z-tooltip);
  transition: var(--pg-transition-fast);
}

.pg-skip-link:focus {
  top: 6px;
  outline: 2px solid var(--pg-primary-light);
  outline-offset: 2px;
}

/* Focus indicators */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
[tabindex]:focus {
  outline: 2px solid var(--pg-primary);
  outline-offset: 2px;
  border-radius: var(--pg-border-radius-sm);
}

/* Focus visible for modern browsers */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--pg-primary);
  outline-offset: 2px;
}

/* Remove outline for mouse users only */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
  outline: none;
}