/* ============================================
   PAGE TEMPLATE 
   Legal pages, FAQ, About, etc.
   ============================================ */

.kosmetix-page {
  background: var(--wp--preset--color--snow);
}

.kosmetix-page-article {
  /* Full width article container */
}

/* Page Header */
.kosmetix-page-header {
  padding: var(--wp--preset--spacing--2xl) 0;
  background: linear-gradient(
    135deg,
    var(--wp--preset--color--white) 0%,
    var(--wp--preset--color--pearl) 100%
  );
  border-bottom: 1px solid var(--wp--preset--color--mist);
  text-align: center;
}

.kosmetix-page-title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 500;
  color: var(--wp--preset--color--mocha-mousse);
  margin: 0;
  letter-spacing: -0.02em;
}

/* Page Content Section */
.kosmetix-page-content {
  padding: var(--wp--preset--spacing--2xl) 0;
  background: var(--wp--preset--color--white);
}

.kosmetix-page-body {
  max-width: 800px;
  margin: 0 auto;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.8;
  color: var(--wp--preset--color--charcoal);
}

/* Full width variant for WooCommerce pages (cart, checkout) */
.kosmetix-page-body--full-width,
.woocommerce-cart .kosmetix-page-body,
.woocommerce-checkout .kosmetix-page-body {
  max-width: 100%;
  width: 100%;
}

/* Typography within page content */
.kosmetix-page-body h2 {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 500;
  color: var(--wp--preset--color--mocha-mousse);
  margin-top: var(--wp--preset--spacing--xl);
  margin-bottom: var(--wp--preset--spacing--md);
  padding-bottom: var(--wp--preset--spacing--sm);
  border-bottom: 1px solid var(--wp--preset--color--mist);
}

.kosmetix-page-body h2:first-child {
  margin-top: 0;
}

.kosmetix-page-body h3 {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 500;
  color: var(--wp--preset--color--mocha-mousse);
  margin-top: var(--wp--preset--spacing--lg);
  margin-bottom: var(--wp--preset--spacing--sm);
}

.kosmetix-page-body p {
  margin-bottom: var(--wp--preset--spacing--md);
}

.kosmetix-page-body ul,
.kosmetix-page-body ol {
  margin-bottom: var(--wp--preset--spacing--md);
  padding-left: var(--wp--preset--spacing--lg);
}

.kosmetix-page-body li {
  margin-bottom: var(--wp--preset--spacing--xs);
  padding-left: var(--wp--preset--spacing--xs);
}

.kosmetix-page-body ul li::marker {
  color: var(--wp--preset--color--rose-gold);
}

.kosmetix-page-body a {
  color: var(--wp--preset--color--rose-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--wp--custom--transition--fast);
}

.kosmetix-page-body a:hover {
  color: var(--wp--preset--color--mocha-mousse);
}

/* FAQ specific styles */
.kosmetix-page-body h3 + p {
  margin-top: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .kosmetix-page-header {
    padding: var(--wp--preset--spacing--xl) 0;
  }

  .kosmetix-page-content {
    padding: var(--wp--preset--spacing--xl) 0;
  }

  .kosmetix-page-body {
    font-size: var(--wp--preset--font-size--sm);
  }

  .kosmetix-page-body h2 {
    font-size: var(--wp--preset--font-size--lg);
  }

  .kosmetix-page-body h3 {
    font-size: var(--wp--preset--font-size--base);
  }
}